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

//全选
        $("#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');
                }
            }
        });