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);
                }
            });
        });
    });