jquery 的checkbox全选事件

1 insert中内容

<td class="active width-15" rowspan="2">
                <label class="pull-right">
                    窗口事项
                </label>
            </td>
            <td rowspan="2" class="width-35"><textarea style="height:100px" ondblclick="goItems();" readonly="readonly" id="itemnames" name="itemnames" class="form-control" placeholder="双击输入框选择" ></textarea></td>
            

 <!-- 隐藏域 -->
           
            <input type="hidden" name="items" id="items">

点击事件内容

function goItems() {
        var items = $("#items").val();
        top.layer.open({
            type: 2,
            data:{"items":items},
            area: ['1200px', '800px'],
            title: "选择业务",
            maxmin: true, //开启最大化最小化按钮
            content: "${basePath}/halls/item/list?items="+items,
            btn: ['确定', '关闭'],
            yes: function (index, layero) {

                //得到所有的item编号
                var nodes = layero.find("iframe")[0].contentWindow.$("input[name='items']");
                var items = '';
                nodes.each(function(i,v){
                    items += $(this).attr("value") + ",";
                });
                $("#items").val(items);

                //得到所有itenNames
                var node = layero.find("iframe")[0].contentWindow.$("input[name='itemnames']");
                var itemNames = '';
                node.each(function(i,v){
                    itemNames += $(this).attr("value") + ",";
                });
                $("#itemnames").val(itemNames);



                top.layer.close(index);
            },
            cancel: function (index) {
                top.layer.close(index);
            }
        });
    }

2 item_list中的数据

隐藏域内容 里面将得到选中的内容的id和选中里面自定义的值

<input type="hidden" id="items" name="items" value="${items!}">
    <input type="hidden" name="itemnames" id="itemnames" size="500" value="${itemames!}">

jquery事件

<script type="text/javascript">
    var datatable;
    //定义两个变量
    var Qids = [];
    var Names = [];

    function initDatatable(){
    	//得到从controller中传过来的值
        initOldValues("${items}", "${itemNames}");

        /**
         * 初始化datatable
         */
        datatable = $('#datatable').DataTable({
            "order": [0, 'desc'],
            "ajax": {
                "url": "${basePath}/halls/item/list",
                "type": "post",
                "data": function (d) {
                    d.itemName = $("#itemName").val();
                    d.agentName = $("#agentName").val();
                    d.orderName = camel2Underline(d.columns[d.order[0].column].data);
                    d.orderType = d.order[0].dir;
                }
            },
            "columns": [

                {
                    "data": "id",
                },
                {
                    "data": "itemName",
                    render: function(data, type, raw){
                        return  data.length>=40?data.substr(0,40)+"</br>"+data.substr(40,data.length):data;
                    }
                },
                {
                    "data": "agentName"
                },
            ],
            "columnDefs": [
                {
                    "targets": 3,
                    "data": "id",
                    "render": function(data, type, row) {
                        // initOldValues(row.itemIds,row.itemNames);//itemIds、itemNames初始值。
                        var ids =[];//已选择的itemsId
                        ids = row.id.split(",");
                        var str = '<input value="'+row.id+'" valueName="'+row.itemName+'" type="checkBox" class="chks" name="chks" a="'+row.id+'" b="'+row.itemName+'">';
                        return str;
                    }
                },

            ],

            /*序号排序*/
            "fnDrawCallback": function () {
                var api = this.api();
                var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
                api.column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = startIndex + i + 1;
                });
                initQids();
            }
        });
    }

    $(function () {
        //pace监听ajax
        $(document).ajaxStart(function() {
            Pace.restart();
        });

        //初始化datatable
        initDatatable();

        /**
         * 搜索
         */
        $("#searchBtn").on('click', function () {
            datatable.ajax.reload();
        });

        // 全选
        $("#checxAll").click(function(e){
            e.preventDefault();
            var check = $("#checxAll").attr("check");
            if(check==1){ // 全选
                $("#checxAll").attr("check",0);
                setTimeout(function(){$("#checkInput").prop("checked",true);},0);
                $("#datatable .chks").prop("checked",true);
                QidsAll(1);
            }else if(check==0){
                $("#checxAll").attr("check",1);
                setTimeout(function(){$("#checkInput").prop("checked",false);},0);
                $("#datatable .chks").prop("checked",false);
                QidsAll(2);
            }

        });
    });


    function initQids(){ // 初始化页面、分页 选中效果
        $("#datatable .chks").each(function(){  // 处理分页选中
            var qidsVal = $(this).val();
            if($.inArray(qidsVal,Qids)>-1){
                $(this).prop("checked","true");
            }
        });
        initCheckAll();
    }

    function initCheckAll(){ // 判断是否是全选状态
        if( $("#datatable .chks[type=checkbox]:checked").length == $("#datatable .chks").length && $("#datatable .chks").length!==0 ){
            $("#checxAll").attr("check",0);
            $("#checkInput").prop("checked",true);
        }else{
            $("#checxAll").attr("check",1);
            $("#checkInput").prop("checked",false);
        }
    }

    function QidsAll(i){ // 全选数据处理
        $("#datatable .chks").each(function(){
            var qidsVal = $(this).val();
            var namesVal = $(this).attr("valueName");
            if(i==1){ // 选中
                Qids.push( qidsVal);
                Names.push( namesVal);
            }else if(i==2){ // 移除
                Qids.splice( $.inArray(qidsVal,Qids),1);
                Names.splice( $.inArray(namesVal,Names),1);
            }
        });
        Qids = Qids.sort();
        Qids= $.unique(Qids);
        Names= $.unique(Names);
        $("#items").val(Qids);
        $("#itemnames").val(Names);
    }

    function initOldValues(x,y){
        if(x!='' && y!=''){
            Qids = x.split(",");
            Names = y.split(",");
        }
        $("#items").val(Qids);
        $("#itemnames").val(Names);
    }

    $("#datatable").on("click",".chks",function(){ // 勾选、取消事项
        Qids = Qids.sort();
        Qids= $.unique(Qids);
        Names= $.unique(Names);
        var qidsVal = $(this).val();
        var namesVal = $(this).attr("valueName");
        if($(this).is(":checked" )){
            if (Qids.length==0) {
                Qids[0]= qidsVal;
                Names[0]= namesVal;
            } else {
                Qids.push( qidsVal);
                Names.push( namesVal);
            }
        } else{
            Qids.splice( $.inArray(qidsVal,Qids),1);
            Names.splice( $.inArray(namesVal,Names),1);
        }
        initCheckAll();
        $("#items").val(Qids);
        $("#itemnames").val(Names);
    });

3 Controller中的/halls/item/list?items="+items 的内容

注入Service

@Autowired
    private IWindowService windowService;

 public String list() {
        //查询所有单位
        List oList = orgService.selectAll();
        request.setAttribute("oList",oList);

        //得到所有已选择的items
        String items = request.getParameter("items");

        String itemNames = "";
        if(!"".equals(items)){
            String[] idArr = items.split(",");
            for (int i = 0; i < idArr.length; i++) {
                itemNames += windowService.selectItemNames(idArr[i])+",";
            }
        }
        request.setAttribute("items", items);
        request.setAttribute("itemNames", !"".equals(itemNames)?itemNames.substring(0,itemNames.length()-1):"");


        return "halls/item/list";
    }