watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHpqOTExOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

要实现的效果：

1、父节点选中，则以下的子节点全选中

2、父节点不选中。则以下的子节点全不选中

3、子节点仅仅要选中了一个，则父节点选中

4、子节点全不选中。则父亲节点不选中

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP 'quanxian.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

	<script type="text/javascript">

		function selectAll(idStart){

			var x = $("input[id^='"+idStart+"']");

			x.each(function(index,domEle){

				$(this).prop("checked",true);

			});

		}

		function unSelectAllBox(idStart){

			var x = $("input[id^='"+idStart+"']");

			x.each(function(index,domEle){

				$(this).removeProp("checked");

			});

		}

		function selectFather(id){

			$("#"+id).prop("checked", "checked");

		}

		function UnSelectFather(id){

			$("#"+id).removeProp("checked");

		}

		//推断还有没被选中的checkedbox

		function isExistSelect(idStart){

			var flag = false;

			var $arrayEle=$("input[id^='"+idStart+"'][id!='"+idStart+"_"+idStart+"']");

			for (var i=0; i<$arrayEle.length; i++){

				if ($($arrayEle[i]).prop("checked")){

					flag=true;

				}

			}

			return flag;

		}

		function goSelect(id){

			var arrayVal=id.split("_");

				if (arrayVal[0] == arrayVal[1]){//parent dom

					if ($("#"+id).prop("checked")){

						selectAll(arrayVal[0]);

					}else{

						unSelectAllBox(arrayVal[0]);

					}

				}else{//child dom

					if ($("#" + id).prop("checked")) {

						selectFather(arrayVal[0] + "_" + arrayVal[0]);

					}

					else {

						if (!isExistSelect(arrayVal[0])){

							UnSelectFather(arrayVal[0] + "_" + arrayVal[0]);

						}

					}

				}

		}

	</script>

  </head>

  <body>

  	<fieldset>

  	<legend><input type="checkbox"  id="company_company" onclick="goSelect(this.id)" />客户管理</legend>

	    <div><input type="checkbox"  id="company_base"  onclick="goSelect(this.id)"/>客户管理1</div>

		<div><input type="checkbox"  id="company_linkman" onclick="goSelect(this.id)" />客户管理2</div>

		<div><input type="checkbox"  id="company_linkTouch"  onclick="goSelect(this.id)"/>客户管理3</div>

		<div><input type="checkbox"  id="company_rule"  onclick="goSelect(this.id)"/>客户管理4</div>	

	</fieldset>

	<br/>

	<fieldset>

  	<legend><input type="checkbox"  id="employee_employee" onclick="goSelect(this.id)" />员工管理</legend>

	    <div><input type="checkbox"  id="employee_base"  onclick="goSelect(this.id)"/>员工管理1</div>

		<div><input type="checkbox"  id="employee_linkman" onclick="goSelect(this.id)" />员工管理2</div>

		<div><input type="checkbox"  id="employee_linkTouch"  onclick="goSelect(this.id)"/>员工管理3</div>

		<div><input type="checkbox"  id="employee_rule"  onclick="goSelect(this.id)"/>员工管理4</div>	

	</fieldset>

  </body>

</html>

note:本例中获取节点属性用的是prop()方法，用attr()不行。。jquery 1.6版本号就对这两个方法进行了改变，attribute 表示从文档中获取DOM状态信息，而properties 表示动态信息元素，例如，使用复选框。

版权声明：本文博主原创文章，博客，未经同意不得转载。

jquery 访问控制菜单的更多相关文章

  1. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  2. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  3. jQuery实现菜单点击隐藏（上下左右）

    canrun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  5. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  8. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. 分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型 ...

随机推荐

  1. height:100%失败

    height显然,设置100% 为什么不能看到效果.非常多的时间不是很扎实的时间的基础上,,经常会遇到这样的问题,原因很简单的事实 首先,你必须确保 html{height:100%;} body{h ...

  2. 在深入分析：Android在app之间的相互作用(一个，使用Action)

    我们开发Android App时间应用,有些需求,我们需要启动另一App为了应对一些逻辑.例如,我们需要映射基于地址调用系统或相关Map App,所以,我们不自己有App在相应的功能的制备.而是通过I ...

  3. POJ 1236 Network of Schools（强连通分量）

    POJ 1236 Network of Schools 题目链接 题意:题意本质上就是,给定一个有向图,问两个问题 1.从哪几个顶点出发,能走全全部点 2.最少连几条边,使得图强连通 思路: #inc ...

  4. PHP安装mcrypt.so报错 mcrypt.h not found 的解决的方法

    报错内容:configure: error: mcrypt.h not found. Please reinstall libmcrypt 网上搜索了非常多,包含自带的 yum install lib ...

  5. 两个文件中的配置项设置方法和C比较程序处理

    在实际的软件开发项目.程序经常需要翻阅了一些资料可能会改变从外部,我们需要读出的信息到一个统一的文件(一般ini档),而此文件被称为个人资料. 考虑这样一个场景,程序须要与多个数据库打交道,要从配置文 ...

  6. 矢量编程——随着MNIST案例

    矢量编程使用的所有明确的矢量运算,而不是for周期. 上一节所用的是512*512*10的数据集非常小.我们取的patch非常小(8*8),学来的特征非常少(25).而我又凝视掉了梯度校验(偷懒),所 ...

  7. /dev/shm（转）

    引用网上:/dev/shm首先可以看出来/dev/shm是一个设备文件, 可以把/dev/shm看作是系统内存的入口, 可以把它看做是一块物理存储设备,一个tmp filesystem, 你可以通过这 ...

  8. HSV 量化

    function L=hsvquan(hsv) %对HSV量化,该3维特征矢量: h=hsv(:,:,1); s=hsv(:,:,2); v=hsv(:,:,3); % 假设对HSV 空间进行适当的量 ...

  9. Linux磁盘分区，目录树，文件系统的关系(转)

    研究了很久,自始至终不能够从三者的区别和联系中找到一个大脑与这些概念之间合适的相处方式.对于基本概念和理论理解不到位,在工作之中会走很多弯路和犯很多错误.今天花一天的时间,终于对三者的区别和联系有了更 ...

  10. Hadoop Hive sql 语法详细解释

    Hive 是基于Hadoop 构建的一套数据仓库分析系统.它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,能够将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...