全选、反选、多选、解决行与checkbox的冲突

来源：互联网发布：今晚美国公布什么数据编辑：程序博客网时间：2024/06/05 14:31

//全选        $("#checkAll").on("click", function () {            if ($(this).prop("checked") === true) {                $("input[name='checkList']").prop("checked", $(this).prop("checked"));            } else {                $("input[name='checkList']").prop("checked", false);            }        });        //复选框：1、（tr）点击选中，2、多选3、反选，        $(document).ready(function () {            $('#mylist tbody').on('click', 'tr', function () {                /*当前（tr）复选框是选中的*/                if ($(this).children().first().children().prop("checked") === true) {                    /*当前是全选的*/                    if ($("#checkAll").prop("checked") === true) {                        /*当前（tr）去除选中*/                        $(this).children().first().children().attr("checked", false);                        /*全选按钮去除选中*/                        $("#checkAll").prop("checked", false).parent().removeClass('checked');                    } else if ($("#checkAll").prop("checked") !== true) {                        /*（tr）选中（当前）*/                        $(this).children().first().children().attr("checked", false);                        /*当前不是全选的，当前（tr）选中*/                        $("#checkAll").prop("checked", false).parent().removeClass('checked');                    }                } else if($(this).children().first().children().prop("checked") !== true){                    /*（tr）选中（当前）*/                    $(this).children().first().children().attr("checked", true);                    /*获取选中（tr）长度和checkbox选中长度参数*/                    var $tr = $(this).parents('tr');                    $tr.toggleClass('selected');                    var $tmp = $('[name=checkList]:checkbox');                    /*选中数量达标的反选（选中全选）*/                    if ($tmp.length == $tmp.filter(':checked').length) {                        $("#checkAll").prop("checked", true).parent().addClass('checked');                    } else {                        /*选中数量不达标的反选（去除全选）*/                        $("#checkAll").prop("checked", false).parent().removeClass('checked');                    }                }            });        });/**这里使用了datatable.js插件100%匹配，如果要使用的话，请自行修改jquray元素，如果有更好的方法请告诉我1448711794@qq.com**/

<table    id="mylist"><th><input type="checkbox" id="checkAll"></th><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr><tr><td><input type="checkbox" name="checkList" id="checkList" ></td></tr> </table>

上图：

上面的那个代码有个行与控件的冲突：

解决冲突后的完整代码：

//复选框：1、（tr）点击选中，2、多选3、反选，        $('#mylist tbody').on('click', 'tr', function (event) {            var isCheckbox = $(event.target).is(":checkbox");//判断是否是点击的checkbox控件            if ($("#checkAll").prop("checked") === true) {                $(this).children().first().children().attr("checked", false);                $("#checkAll").prop("checked", false).parent().removeClass('checked');            } else if ($("#checkAll").prop("checked") != true) {                if ($(this).children().first().children().prop("checked") === true) {                    if(isCheckbox){//是                        $(this).children().first().children().attr("checked", true);                    }else if(!isCheckbox){//不是                        $(this).children().first().children().attr("checked", false);                    }                } else if ($(this).children().first().children().prop("checked") != true) {                    if(isCheckbox){//是                        $(this).children().first().children().attr("checked", false);                    }else if(!isCheckbox){//不是                        $(this).children().first().children().attr("checked", true);                    }                }                var $tr = $(this).parents('tr');                $tr.toggleClass('selected');                var $tmp = $('[name=checkList]:checkbox');                if ($tmp.length == $tmp.filter(':checked').length) {                    $("#checkAll").prop("checked", false).parent().addClass('checked');                } else if ($tmp.length != $tmp.filter(':checked').length) {                    $("#checkAll").prop("checked", false).parent().removeClass('checked');                }            }        });

0 0