码迷,mamicode.com
首页 > Web开发 > 详细

jquery 权限控制菜单

时间:2014-06-22 14:59:13      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:des   style   class   blog   code   java   

bubuko.com,布布扣

要实现的效果:

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 权限控制菜单,布布扣,bubuko.com

jquery 权限控制菜单

标签:des   style   class   blog   code   java   

原文地址:http://blog.csdn.net/hzj9118/article/details/32325839

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!