页面显示
页面代码
1 <div> 2 <div><input type="checkbox" value="" class="check_all" >全选</div> 3 <div><input type="checkbox" class="check_Id" value="10,12,46">11</div> 4 <div><input type="checkbox" class="check_Id" value="132">22</div> 5 <div><input type="checkbox" class="check_Id" value="1">33</div> 6 <div><input type="checkbox" class="check_Id" value="21,6">44</div> 7 <button id="batch_btn">批量操作</button> 8 </div>
脚本代码
1 $(function () { 2 //全选 控制单个 3 $("body").on("change", ".check_all", function () { 4 var ischecked = $(this).prop("checked"); 5 $('.check_Id').prop("checked", ischecked); 6 }); 7 //单个影响全选 8 $("body").on("change", ".check_Id", function () { 9 var chsub = $(".check_Id").length; 10 var checkedsub = $(".check_Id:checked").length; 11 if (checkedsub === chsub) { 12 $(".check_all").prop("checked", true); 13 } else { 14 $(".check_all").prop("checked", false); 15 } 16 }); 17 //批量 提交全部数据 18 $("body").on("click", "#batch_btn", function () { 19 var checkedsub = $(".check_Id:checked"); 20 if (checkedsub.length === 0) { 21 alert("您还没有选中值"); 22 return; 23 } 24 var all_info = new Array(); 25 checkedsub.each(function () { 26 console.log($(this).val()); 27 var all_ids = $(this).val().split(","); 28 for (var i = 0; i < all_ids.length; i++) { 29 all_info.push({ "Id": all_ids[i]}); 30 } 31 }); 32 console.log(all_info); 33 $.ajax({ 34 type: "POST", 35 url: "/test/test", 36 contentType: "application/json", //必须有 37 dataType: "json", //表示返回值类型，不必须 38 data: JSON.stringify({ batches: all_info}), 39 success: function (jsonResult) { 40 console.log(jsonResult); 41 } 42 }); 43 }); 44 });