用jq来实现二级全选取消

来源:互联网 发布:云杉网络招聘 编辑:程序博客网 时间:2024/06/04 00:57

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

整体结构如下图所示

0 0
原创粉丝点击