用jq来实现二级全选取消

最新推荐文章于 2022-06-10 14:34:09 发布

wangaiqi1994

最新推荐文章于 2022-06-10 14:34:09 发布

阅读量380

点赞数

分类专栏： js控件文章标签： js

本文链接：https://blog.csdn.net/weixin_38467833/article/details/70575429

版权

js控件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用jq来实现二级全选取消

<div class="tab_info_list">
                <div class="tab_list_left">
                    <div class="left_info_check">
                        <span class="people_num_info">选择结果：共<span class="search_people_num">35</span>人</span>
                        <span class="check_left_info">
                            <input type="checkbox" id="J-checkAll"/>
                            <label>全选</label>
                            <img src="images/type_chose.png"  id="J-choseleftType"/>
                        </span>
                        <table border="0" width="100%" cellspacing="0" cellpadding="0" class="table_list table_communist table_check_left">
                            <tr>
                                <th colspan="5" name="table1">
                                    <input type="checkbox" class="communist_checked checked_left_all" />
                                    <label class="communist">中国共产党，共<span class="search_people_num">24</span>人</label>
                                </th>
                            </tr>
                            <tr class="exist_tr">
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="1"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光" id="2"/>
                                    <label>马光</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马" id="3"/>
                                    <label>马</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="4"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="5"/>
                                    <label>马光明</label>
                                </td>
                            </tr>
                            <tr class="exist_tr">
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="6"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光" id="7"/>
                                    <label>马光</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马" id="8"/>
                                    <label>马</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="9"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table1">
                                    <input type="checkbox" value="马光明" id="10"/>
                                    <label>马光明</label>
                                </td>
                            </tr>
                        </table>
                        <table border="0" width="100%" cellspacing="0" cellpadding="0" class="table_list table_communist table_check_left">
                            <tr>
                                <th colspan="5" name="table2">
                                    <input type="checkbox" class="communist_checked checked_left_all" />
                                    <label class="communist">中国共产党，共<span class="search_people_num">24</span>人</label>
                                </th>
                            </tr>
                            <tr class="exist_tr">
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="1"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光" id="2"/>
                                    <label>马光</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马" id="3"/>
                                    <label>马</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="4"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="5"/>
                                    <label>马光明</label>
                                </td>
                            </tr>
                            <tr class="exist_tr">
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="6"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光" id="7"/>
                                    <label>马光</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马" id="8"/>
                                    <label>马</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="9"/>
                                    <label>马光明</label>
                                </td>
                                <td name="table2">
                                    <input type="checkbox" value="马光明" id="10"/>
                                    <label>马光明</label>
                                </td>
                            </tr>
                        </table>        
                    </div>
                </div>


var chkbox = {
    checkOne: function(checkbox){
        // 根据实际情况确定是否需要备份当前操作对象，用于在别的标签事件中通过this操作当前对象。
        var self = $(checkbox);
        var checked = self.is(":checked");
        self.attr("checked", checked);

        /*
            根据当前checkbox的级别处理关系checkbox的状态
            根据页面的布局情况，获取非唯一的checkbox的得到一个类数组
            目前在一个div区域内存在三种checkbox：
                1、行内数据的checkbox：直接与用户信息关联,父标签是td
                2、行间数据的checkbox：用户的分组信息，父标签是th
                3、区域全选的checkbox：区域子checkbox的选择情况，父标签是span，由于在页面上是唯一的，故可以通过ID获取
         */
        var tagParent = self.parent();
        if (this.isPointTag(tagParent[0], "td")) {
            // 更新关联父级th下边的checkbox
            if (checked) {
                this.checkTh(self);// 更新关联的行间全选checkbox
            } else {
                var $localTab = self.parents("table");// 所在表格
                // 父级checkbox
                // 方式一：$parentCheckbox = $(childCheckbox).parents("tr").prev("tr").find(":checkbox:first");
                $localTab.find(":checkbox:first").attr("checked", checked);
                this.checkAll(self);
            }
        } else {
            // isPointTag(tagParent, "th") || isPointTag(tagParent, "span")
            if (this.isPointTag(tagParent[0], "th")) {
                // th标签
                // 更新子标签的选中状态，更新全选的选中状态
                self.parents("table").find(":checkbox:not(:disabled)").attr("checked", checked);
                this.checkAll(self);
            } else {
                // 全选标签
                self.parent().nextAll("table").find(":checkbox:not(:disabled)").attr("checked", checked);
            }
        }
    },
    checkTh: function(childCheckbox){
        var $localTab = $(childCheckbox).parents("table");// 所在表格
            // 父级checkbox
            // 方式一：
            $parentCheckbox = $(childCheckbox).parents("tr").prev("tr").find(":checkbox:first");
            // :first、：last是等价于eq(0)、eq(size() - 1)的
            $parentCheckbox =$localTab.find(":checkbox:first");
            var checkboxTotal = $localTab.find(":checkbox").size() - 1;// 去除全选
            checkedTotal = $localTab.find(":checkbox:checked").size();// 去除全选
        $parentCheckbox.attr("checked", (checkboxTotal === checkedTotal));
        // 计算全选checkbox的状态
        this.checkAll(childCheckbox);
    },
    checkAll: function(childCheckbox){
        var checkedFlag = $(childCheckbox).is(":checked");
        var rightDiv = $(childCheckbox).parents("div.tab_list_right");
        leftDiv = $(childCheckbox).parents("div.tab_list_left");
        if ((0 == rightDiv.length) && (null != leftDiv)) {
            var $checkboxAll = $("#J-checkAll");
            // 目前的布局：行间全选checkbox的个数等于区域包含table的个数
            var $checkBoxTabAll = $checkboxAll.parent().nextAll("table");// 获得table后面的所有同级元素。
                checkedTotal = $checkBoxTabAll.find("tr:first th:first :checkbox:checked").size();
            $checkboxAll.attr("checked", ($checkBoxTabAll.size() === checkedTotal));
        } else if ((null != rightDiv) && (0 == leftDiv.length)) {
            var $checkboxAllR = $("#J-checkrightAll");
            var $checkBoxTabAllR = $checkboxAllR.parent().nextAll("table");// 获得table后面的所有同级元素。
                checkedTotalR = $checkBoxTabAllR.find("tr:first th:first :checkbox:checked").size();
            $checkboxAllR.attr("checked", ($checkBoxTabAllR.size() === checkedTotalR));
        }
    },
    isPointTag: function(dom, localTagName){
        var tagName = dom.tagName.toLocaleLowerCase();
        return localTagName === tagName;
    }
};

$("body").on("click",":checkbox", function(){
    chkbox.checkOne(this);
});