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 />
&nbsp;&nbsp;&nbsp;&nbsp; a，应该选中 他的所有直系上级。<br />
&nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br />
2，取消选择一个权限时：<br />
&nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择 他的所有直系下级。<br />
&nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br />

3，全选/取消全选。<br />
4，默认选中当前岗位已有的权限。<br />
</div>
<script type="text/javascript">
$("#privilegeTree").treeview();
</script>
</body>
</html>

jquery 全选功能的更多相关文章

  1. jQuery全选功能

    $(document).ready(function(){ //为父按钮添加事件 $("#chk_all").click(function(){ var a=$("#ch ...

  2. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  3. jquery实现全选功能

    主要是模拟一些网页中的表格实现全选功能. <form> 你爱好的运动是: <input type="checkbox" id="Check" ...

  4. 问题1：jquery实现全选功能，第二次失效（已解决）

    问题:使用了attr("checked",true”)设置子复选框的被选状态,第一次执行功能正常,但第二次失效. 解决方案:将attr("checked",tr ...

  5. JQUERY的给Check全选功能

    //给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='c ...

  6. Jquery全选与反选checkbox（代码示例）

    今天在公司要实现操作权限的功能,需要根据左边的树,选择一项,判断右边的操作权限,例如,增加,修改,删除,查看等按钮的显示与隐藏: 这个功能实现思路如下: 1.操作权限:增加.修改等按钮的ID和Text ...

  7. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  8. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  9. jQuery 全选 反选 单击行改变背景色

    我先把CSS样式放出来,其实这个可以直接忽略 ;;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{ba ...

随机推荐

  1. hdu 2053 Switch Game 水题一枚，鉴定完毕

    Switch Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. hdu 2258 优先队列

    Continuous Same Game (1) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  3. C++ UTF8 UrlEncode(宽字符)(转载)

    转载:http://www.cnblogs.com/newcj/p/3645749.html #include "UrlEncode.h" #include <string& ...

  4. SqlSever基础 select cast 将一个int类型数据转换为char

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  5. 重定向redirect与跳转forward区别

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoResponse.a ...

  6. Cheatsheet: 2013 08.14 ~ 08.19

    .NET Lucene.Net ultra fast search for MVC or WebForms site => made easy! C# State Machines HttpCl ...

  7. sencha touch之store

    store相当于数据库的表,是模型实例的集合.(是不是可以看成结构体数组) 可以对模型实例进行新建.更新.读取.删除.排序和过滤等操作. 创建store 由于store是表,必须要有模型或者定义字段, ...

  8. FZU 2219 StarCraft（星际争霸）

    Description 题目描述 ZB loves playing StarCraft and he likes Zerg most! One day, when ZB was playing SC2 ...

  9. 函数（def)

    一.为什么要使用函数: 面向过程的编程在代码里有很多代码是可以重复利用的,如果使用面向过程编程会使代码显得纷繁复杂,不利于他人和自己日后的阅读.而在函数式编程里,则可以把每个可重复利用的功能封装在一个 ...

  10. 常用的邮箱服务器（SMTP、POP3）地址、端口

    常用的邮箱服务器(SMTP.POP3)地址.端口 参考网址:http://wenku.baidu.com/link?url=IPv15rPRkd0nsuGH0Dm0A5kFyRaeHJY2_gYpDW ...