JQuery之子复选框全部选中则全选框选中

客官°小女子只卖身不卖艺 2022-09-26 11:52 262阅读 0赞

我为大家提供了六种方法

供大家参考

$(".usertable td input[type='checkbox']").change(function () {
                    //方法一
                    //alert($(".tu span input[type='checkbox']").not(":checked").size());
                    //if ($(".usertable td input[type='checkbox']").not(":checked").size() <= 0) {//获取抛弃选中的个数 来进行判断
                    //    $('#headerchecked').prop('checked', true);
    
                    //} else {
                    //    $('#headerchecked').prop('checked', false);
    
                    //}
    
                    //方法二
                    //    var count = 0;
                    //    $(".usertable td").find("input[type='checkbox']").each(function (index,item) {
                    //        if ($(item).is(":checked"))
                    //        {
                    //            count++;
                    //        }
                    //    })
                    //    if (count == $(".usertable td").find("input[type='checkbox']").length) {
                    //        $('#headerchecked').prop('checked', true);//利用选中的长度来进行判断
                    //    }
                    //    else {
                    //        $('#headerchecked').prop('checked', false);
                    //    }
    
                    //方法三
                    //    var count = true;
                    //    $(".usertable td").find("input[type='checkbox']").each(function (index, item) {
                    //        if (!$(item).is(":checked")) {//这是利用上面的代码简写   相反的思路
                    //            count = false;
                    //        }
    
                    //    })
                    //    $('#headerchecked').prop('checked', count);
    
                    //方法四
                    //$(".usertable td input[type='checkbox']").not(":checked").size() <= 0 ? $('#headerchecked').prop('checked', true) : $('#headerchecked').prop('checked', false);
    
                    //方法五   和第四种一样 只是改成了<span style="font-family: Arial, Helvetica, sans-serif;">true : false</span>
                    //    $('#headerchecked').prop('checked', $(".usertable td").find("input[type='checkbox']").not(":checked").size() <= 0 ? true : false)
    
                    //方法六
                    $('#headerchecked').prop('checked', !$(".usertable td").find("input[type='checkbox']").not(":checked").size());
    
                });