Jquery操作全选，反选等批处理
来源：互联网 发布：filesaver.js 编辑：程序博客网 时间：2024/06/05 02:30
1.会使用JQuery操作复选框的全选，反选，上级选中，下级全选中等功能。
注意根据HTML页面源代码确定节点的层次关系即可
2. JQuery方法如下：
选择直系上一级元素： parent
选择所有的直系上级元素： parents
选择直系下一级元素： children
选择所有后代元素： find
选择同级元素： siblings
选择兄元素(前一个)： prev
选择弟元素(后一个)： next
3. 案例如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>配置权限</title>
<%@ include file="/WEB-INF/jsp/public/header.jspf" %>
<script language="javascript" src="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.js"></script>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.css" />
<script type="text/javascript">
$(function(){
// 增加onclick事件处理函数
$("input[name=privilegeIds]").click(function(){
// 当选中或取消某个父级权限时，同时也选中或取消所有的下级权限
$(this).siblings("ul").find("input").attr("checked", this.checked);
// 当选中某个子级权限时，应同时选中他的所有直系上级的权限。
if(this.checked == true){ // 可以直接写为 if(this.checked){..}
$(this).parents("li").children("input[name=privilegeIds]").attr("checked", true);
}
// 当取消某个子级权限时，如果同级的权限都没有选择，就也取消上级权限
else{
if( $(this).parent().siblings("li").children("input:checked").size() == 0 ){
$(this).parent().parent().siblings("input").attr("checked", false);
}
}
});
});
</script>
</head>
<body>
<!--显示表单内容-->
<div id=MainArea>
<s:form action="role_setPrivilege">
<s:hidden name="id"></s:hidden>
<!-- 表单内容显示 -->
<div class="ItemBlockBorder">
<div class="ItemBlock">
<table cellpadding="0" cellspacing="0" class="mainForm">
<!--表头-->
<thead>
<tr align="LEFT" valign="MIDDLE" id="TableTitle">
<td width="300px" style="padding-left: 7px;">
<input type="checkbox" id="cbSelectAll" onclick=" $('input[name=privilegeIds]').attr('checked', this.checked) "/>
<label for="cbSelectAll">全选</label>
</td>
</tr>
</thead>
<!--显示数据列表-->
<tbody id="TableData">
<tr class="TableDetail1">
<!-- 显示权限树 -->
<td>
<%-- 显示为树状结构（使用<ul>标签） --%>
<ul id="tree">
<%-- 第一层 --%>
<s:iterator value="topPrivilegeList">
<li>
<input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? 'checked' : ''}"/> />
<span class="folder"> <label for="cb_${id}">${name}</label> </span>
<ul>
<%-- 第二层 --%>
<s:iterator value="children">
<li>
<input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? 'checked' : ''}"/> />
<span class="folder"> <label for="cb_${id}">${name}</label> </span>
<ul>
<%-- 第三层 --%>
<s:iterator value="children">
<li>
<input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? 'checked' : ''}"/> />
<label for="cb_${id}">${name}</span>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
<%-- 显示树节点 --%>
<script type="text/javascript">
$("#tree").treeview();
</script>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</s:form>
</div>
</body>
</html>
0 0
- Jquery操作全选，反选等批处理
- jquery 对 checkbox 的 全选、反选、全不选等操作
- jquery 对 checkbox 的 全选、反选、全不选等操作
- js操作全选,反选等
- jQuery复选框全选反选操作
- jquery实现全选反选操作
- jquery 操作 checkbox 全选、反选、清除
- jQuery对复选框的全选，全不选，反选等的操作
- jQuery对复选框（checkbox)的全选，全不选，反选等的操作
- jquery全选反选
- jquery 全选反选
- Jquery 全选、反选
- jquery -全选/反选
- Jquery 全选，反选
- Jquery 全选 反选
- jquery全选反选
- jquery--全选反选
- jQuery全选反选
- Unicode字符串
- NuGet packages引用包多版本存档清理
- 开机提示：error:no such partition grub rescue>
- 几个有关iOS的几个常见问题-----为什么选择OC语言
- 遗传算法入门（连载之三）
- Jquery操作全选，反选等批处理
- erase()
- ARM指令:BIC
- 蓝鲸python第二题个人理解版
- SoftwareTest Median Test
- 对Linux下常用头文件总结
- C语言函数和汇编函数相互调用
- 计算机的心智笔记（一）
- 这十二行代码是如何让浏览器爆炸的？ －DoS攻击分析及防御
