watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaHpqOTExOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >
要实现的效果：
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 表示动态信息元素，例如，使用复选框。
版权声明：本文博主原创文章，博客，未经同意不得转载。
时间： 2024-11-02 23:33:38