CheckBox使用记录

页面显示

页面代码

   <div>
                 <div><input type="checkbox" value="" class="check_all" >全选</div>
                 <div><input type="checkbox"  class="check_Id" value="10,12,46">11</div>
                 <div><input type="checkbox"  class="check_Id" value="132">22</div>
                 <div><input type="checkbox"  class="check_Id" value="1">33</div>
                 <div><input type="checkbox"  class="check_Id" value="21,6">44</div>
                 <button id="batch_btn">批量操作</button>
         </div>

脚本代码

     $(function () {
         //全选 控制单个
         $("body").on("change", ".check_all", function () {
             var ischecked = $(this).prop("checked");
             $('.check_Id').prop("checked", ischecked);
         });
         //单个影响全选
         $("body").on("change", ".check_Id", function () {
             var chsub = $(".check_Id").length;
             var checkedsub = $(".check_Id:checked").length;
             if (checkedsub === chsub) {
                 $(".check_all").prop("checked", true);
             } else {
                 $(".check_all").prop("checked", false);
             }
         });
         //批量 提交全部数据
         $("body").on("click", "#batch_btn", function () {
             var checkedsub = $(".check_Id:checked");
             if (checkedsub.length === 0) {
                 alert("您还没有选中值");
                 return;
             }
             var all_info = new Array();
             checkedsub.each(function () {
                 console.log($(this).val());
                 var all_ids = $(this).val().split(",");
                 for (var i = 0; i < all_ids.length; i++) {
                     all_info.push({ "Id": all_ids[i]});
                 }
             });
             console.log(all_info);
             $.ajax({
                 type: "POST",
                 url: "/test/test",
                 contentType: "application/json", //必须有
                 dataType: "json", //表示返回值类型，不必须
                 data: JSON.stringify({ batches: all_info}),
                 success: function (jsonResult) {
                     console.log(jsonResult);
                 }
             });
         });
     });