標籤:des style class blog code java
要實現的效果:
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");}//判斷還有沒被選中的checkedboxfunction 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 domif ($("#"+id).prop("checked")){selectAll(arrayVal[0]);}else{unSelectAllBox(arrayVal[0]);}}else{//child domif ($("#" + 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 表示元素的動態狀態資訊,比如說複選框的使用。