jquery 全选功能
1.直接全选（复选框名字要统一）
<input type="CHECKBOX" id="cbSelectAll" onclick="$('input[name=privilegeIds]').attr('checked',this.checked)"/>
<label for="cbSelectAll">全选</label>
<ul id="privilegeTree">
<s:iterator value="privilegeList">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
<ul>
<s:iterator value="children">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
<ul>
<s:iterator value="children">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
2.选中复选框同时选中其上级部门，取消时同时取消其直接上级部门
$(function(){
//为所有的复选框绑定单击事件
$('input[name=privilegeIds]').click(function(){
//当选中某个权限时，同时选中其下级权限，当取消某个权限时，同时取消其下级权限
$(this).siblings('ul').find('input').attr('checked',this.checked);
//当选中某个权限时，同时选中其直接上级权限
if(this.checked){
$(this).parents('li').children('input').attr('checked',true);
}else{
//当取消某个权限时，如果同级权限都没有选中，则取消其上级权限
var size = $(this).parents('li').siblings('li').children('input:checked').size();
if(size == 0){
$(this).parent().parent().siblings('input').attr('checked',false);
}
}
});
});
附：页面源码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>配置权限</title>
<%@include file="/WEB-INF/jsp/public/header.jsp" %>
<!-- 1，引入js文件与css文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/script/jquery_treeview/jquery.treeview.css">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css" />
<script type="text/javascript">
$(function(){
//为所有的复选框绑定单击事件
$('input[name=privilegeIds]').click(function(){
//当选中某个权限时，同时选中其下级权限，当取消某个权限时，同时取消其下级权限
$(this).siblings('ul').find('input').attr('checked',this.checked);
//当选中某个权限时，同时选中其直接上级权限
if(this.checked){
$(this).parents('li').children('input').attr('checked',true);
}else{
//当取消某个权限时，如果同级权限都没有选中，则取消其上级权限
var size = $(this).parents('li').siblings('li').children('input:checked').size();
if(size == 0){
$(this).parent().parent().siblings('input').attr('checked',false);
}
}
});
});
</script>
</head>
<body>
<!-- 标题显示 -->
<div id="Title_bar">
<div id="Title_bar_Head">
<div id="Title_Head"></div>
<div id="Title"><!--页面标题-->
<img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置权限
</div>
<div id="Title_End"></div>
</div>
</div>
<!--显示表单内容-->
<div id=MainArea>
<s:form action="role_setPrivilege" namespace="/" method="post">
<s:hidden name="id"></s:hidden>
<div class="ItemBlock_Title1"><!-- 信息说明 --><div class="ItemBlock_Title1">
<img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 正在为【${name }】配置权限 </div>
</div>
<!-- 表单内容显示 -->
<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;">
<!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->
<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>
<%---
<s:checkboxlist name="privilegeIds" list="privilegeList" listKey="id" listValue="name">
</s:checkboxlist>
<s:iterator value="privilegeList">
<input
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">${name }
<br/>
</s:iterator>
--%>
<ul id="privilegeTree">
<s:iterator value="privilegeList">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
<ul>
<s:iterator value="children">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
<ul>
<s:iterator value="children">
<li>
<input id="cb_${id }"
<s:property value="id in privilegeIds ? 'checked' : '' "/>
value="${id }" type="checkbox" name="privilegeIds">
<label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 表单操作 -->
<div id="InputDetailBar">
<input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/>
<a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a>
</div>
</s:form>
</div>
<div class="Description">
说明：<br />
1，选中一个权限时：<br />
a，应该选中 他的所有直系上级。<br />
b，应该选中他的所有直系下级。<br />
2，取消选择一个权限时：<br />
a，应该取消选择 他的所有直系下级。<br />
b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br />
3，全选/取消全选。<br />
4，默认选中当前岗位已有的权限。<br />
</div>
<script type="text/javascript">
$("#privilegeTree").treeview();
</script>
</body>
</html>
jquery 全选功能的更多相关文章
- jQuery全选功能
$(document).ready(function(){ //为父按钮添加事件 $("#chk_all").click(function(){ var a=$("#ch ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- jquery实现全选功能
主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...
- 问题1：jquery实现全选功能，第二次失效（已解决）
问题:使用了attr("checked",true”)设置子复选框的被选状态,第一次执行功能正常,但第二次失效. 解决方案:将attr("checked",tr ...
- JQUERY的给Check全选功能
//给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='c ...
- Jquery全选与反选checkbox（代码示例）
今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...
- js初学—实现checkbox全选功能
布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...
- C# winform中的datagridview控件标头加入checkbox，实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
- jQuery 全选 反选 单击行改变背景色
我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...
随机推荐
- js的Prototype属性 解释及常用方法
函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一 ...
- SQL调用存储过程
--1调用存储过程exec 存储过程名 参数--2当表使用select a.*,b.* from tb b inner join (select * from openrowset('sqloledb ...
- 【leetcode❤python】70. Climbing Stairs
#Method1:动态规划##当有n个台阶时,可供选择的走法可以分两类:###1,先跨一阶再跨完剩下n-1阶:###2,先跨2阶再跨完剩下n-2阶.###所以n阶的不同走法的数目是n-1阶和n-2阶的 ...
- TCP/IP协议简介
计算机网络是什么? 简单地理解,计算机网络的任务就是传输数据.为了完成这一复杂的任务,国际标准化组织ISO提供了OSI参考模型,这种模型把互联网网络氛围7层,分别是物理层.数据链路层.网络层.传输层. ...
- C++函数前和函数后加const修饰符区别
class Test(){ public: Test(){} const int foo(int a); const int foo(int a) const; }; 一.概念 当const在函数名前 ...
- 【转载】ogre内存管理
原文:ogre内存管理 OGRE内存分配策略相关文件及简述 OGRE提供了自己的内存分配策略,甚至为STL容器提供了新的分配策略,相关文件及简述如下: OgreMemoryAllocatedObjec ...
- MySQL占用内存过大的问题解决
MySQL竟然变化这么大了,记忆里还是40MB左右的软件. 想找回记忆里大小的软件(老版本的软件),可以去这个地址看看:http://mirrors.soho.com 现在去官网下载都300多MB了… ...
- c#扩展方法的理解（一:初识）
扩展方法是静态方法,是类的一部分,但是实际上没有放在类的源代码中. 扩展方法所在的类也必须被声明为static C#只支持扩展方法,不支持扩展属性.扩展事件等. 扩展方法的第一个参数是要扩展的类型,放 ...
- web工程中各类地址写法的总结
首先打一个"/" //如果地址给服务器用,那么"/"就代表该web应用 , 如果给浏览器用的,那么"/"就代表网站(其下有多个web应用) ...
- Scrum Meeting---Three(2015-10-27)
今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 今日我学习了Java Web,同时安装好了我的MySQL 4h 进行数据库设计以及Web项目的创建 ...