用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
- 用jq来实现二级全选取消
- jq实现全选功能
- jq 实现CheckBox全选
- jQuery实现全选取消全选
- jquery实现checkbox全选、取消全选
- JQuery实现全选、取消全选、反向选择
- Jquery 实现checkbox全选/取消全选
- jquery 实现checkbox全选、取消全选功能
- html checkbox 实现全选/取消全选
- jQuery实现点击全选和取消全选
- JQuery实现checkbox全选和取消全选
- AngularJS 实现复选框 全选/取消全选
- jquery:实现全选和取消全选
- jQuery实现点击全选和取消全选
- zTree:实现checkbox、全选、取消全选功能
- angularJS--购物车实现全选/取消全选
- JQuery实现全选与取消
- jQuery实现多选框全选/取消
- cxf的webservice的Could not send Message个人问题记录
- jquery学习日志
- mongo服务启动
- Distorting Object Shapes in Screen Space(屏幕空间扭曲)
- GCD线程死锁
- 用jq来实现二级全选取消
- 为什么启动weblogic进入控制台后,AdminServer是ShutDown状态
- Ubuntu 14.04,只显示墙纸和鼠标光标
- Hihocoder-小Hi的烦恼
- C++中的容器类详解
- android应用开发调试手段
- 数据库Initcap函数实现
- 大数据分析师养成记
- windows下redis 开机自启动