全选/分组全选

最新推荐文章于 2022-08-16 14:37:20 发布

fehly

最新推荐文章于 2022-08-16 14:37:20 发布

阅读量239

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML F# ViewUI

本文链接：https://blog.csdn.net/fehly/article/details/83775891

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

分组全选

项目中有时候会遇到分组一对多的单选/反选的需求

这里是整理的一份常用的方法,算是分享/整理下

<html>
	<head>
		 <title>关于分组全选</title>

		 <script type="text/javascript">
		 	  function window_load(){
		 	  
		 	  }
		 	  
		 	  function form_submit(){
		 	  	
		 	  
		 	  	 return false;
		 	  }
		 	  
		 	  function chkParent(pid,cNum){
		 	  	 for(var i=1;i<=cNum;i++){
		 	  	 	 document.getElementById(pid+"_"+i).checked=document.getElementById(pid).checked;
		 	  	 }
		 	  }
		 	  
		 	  function chk_click(cid,pid,cNum){
		 	  	//if(document.getElementById(cid).checked){
		 	  	//	document.getElementById(pid).checked=true;
		 	  	//}else{
		 	  		 var flag=false;
		 	  		 for(var i=1;i<=cNum;i++){
			 	  		 	if( document.getElementById(pid+"_"+i).checked){
			 	  		 		 flag=true;
			 	  		 		 break;
			 	  		 	}
		 	  		 }
		 	  		 document.getElementById(pid).checked=flag;
		 	  	//}
		 	  }
		 </script>
	</head>
	<body οnlοad="window_load();">
		 
		 <form id="f" action="05_function.html" οnsubmit="return form_submit();" >
		   <ol>
		   	 <li>当父节点选中，其下子节点全部选中</li>
		   	 <li>当子节点存在选中，父节点必选中</li>
		   	 <li>当子节点全不选中，父节点不选中</li>
		 </ol>
		 	 <table border=1 width=50%>
		 	 	<tr>
		 	 		<td><input name="parent" type="checkbox" οnclick="chkParent('a',4);" id="a">a<br></td>
		 	 		<td>
		 	 			<input name="child" type="checkbox" οnclick="chk_click('a_1','a',4);" id="a_1" >a_1<br>
		 	 			<input name="child" type="checkbox" οnclick="chk_click('a_2','a',4);" id="a_2" >a_2<br>
		 	 			<input name="child" type="checkbox" οnclick="chk_click('a_3','a',4);" id="a_3" >a_3<br>
		 	 			<input name="child" type="checkbox" οnclick="chk_click('a_4','a',4);" id="a_4" >a_4<br>
		 	 		</td>		 
		 	  </tr>
		 	<tr>
		 		<td colspan=2 align="center">
		 	 <input type="submit" id="btnSub" value="提交">
		 	</td>
		</tr>
		 </form>
  </body>
</html>