checkbox控制table中checkbox列全选和全不选|判断table多选的选中项目

①checkbox控制table中checkbox列全选和全不选

    <table class="layui-table" id="table">
        <tr>
            <td><input type="checkbox" id="ckb" onchange="ckb_change()" /></td>
            <td>任务ID</td>
            <td>任务名称</td>
        </tr>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        //初始化
        $(function () {
            PageList();
        });
        function PageList() {
            $.ajax({
                type: "post",
                url: "/url/action_list",
                date: {},
                success: function (res){
                    //console.log(res.data);
                    if (res.success){
                        $("#tbody").empty();
                        for (var i = 0; i < res.data.length; i++){
                            var html = "";
                            html += "<tr>";
                            html += "<td><input type='checkbox' id='ckb_" + i + "'  onchange='ckb_n_change(" + i +")' /></td>";
                            html += "<td><input type='hidden' id='TaskID_"+ i +"' value='" + res.data[i].TaskID +"' />" + res.data[i].TaskID +"</td>";
                            html += "<td><input type='hidden' id='TaskName_" + i + "' value='" + res.data[i].TaskName +"' />" + res.data[i].TaskName + "</td>";
                            html += "</tr>";
                            $("#tbody").append(html);
                        }
                    }
                }
            });
        }

        //全选/全不选
        function ckb_change() {
            var ckb = document.getElementById('ckb');//控制 全选/全不选 的checkbox
            var table = document.getElementById('table');//获取table对象
            var rows = table.getElementsByTagName('tr');//获取table的所有行，主要是行号index
            if (ckb.checked) {//全选
                for (var i = 0; i < rows.length; i++) {
                    $("#ckb_" + i).prop('checked', true);//勾选
                }
            } else {//全不选
                for (var i = 0; i < rows.length; i++) {
                    $("#ckb_" + i).prop('checked', false);//不勾选
                }
            }
        }

        //table的checkbox列的勾选
        function ckb_n_change(id) {
            var ckb = document.getElementById('ckb_' + id);//table第1列的checkbox
            if (!ckb.checked) {
                $("#ckb").prop('checked', false);
            }
            else {
                //debugger;
                var table = document.getElementById('table');//获取table对象
                var rows = table.getElementsByTagName('tr');//获取table的所有行，主要是行号index
                var b = true;//如果每一行的checkbox都选中
                for (var i = 0; i < rows.length-1; i++) {
                    if ($('#ckb_' + i).is(':checked')) {
                    } else {
                        b = false;
                    }
                }
                if (b) {//都选中
                    $("#ckb").prop('checked', true);//选中 全选的checkbox
                }
                else {
                    $("#ckb").prop('checked', false);
                }
            }
        }
    </script>

②判断table多选的选中项目

<input type="button" id="btnSave" class="layui-btn layui-btn-radius " value="提交" onclick="Save()" />
<script>
  //提交
  function Save() {
      var table = document.getElementById('table');//获取table对象
      var rows = table.getElementsByTagName('tr');//获取table的所有行，主要是行号index
      //遍历每一行
      for (var i = 0; i < rows.length; i++) {
          if ($("#ckb_" + i).is(':checked')) {
              //alert("第"+i+"行，被勾选！");
              var obj = {
                  "TaskID": $("#TaskID_"+i).val(),
                  "TaskName": $("#TaskID_"+i).find("option:selected").text(),  
              };                
               $.ajax({
                   type: "POST",
                   url: "/url/action_add",
                   data: {
                       "obj": obj,
                   },
                   success: function (result) {
                        //...略....
                   }
               });
          }
      }
  }
</script>