div下实现checkbox全部选中

2016-11-17 - 1,467 Views - 0 Goods - Nothing

我想在工作中都会遇到web前端checkbox的相关操作,今天这里就给出一个div下所有checkbox选中以及取消操作
HTML代码如下:


<div style="width:500px;height:100px;border-style:solid; border-color: #CCC;border-radius:10px;" id="div1">
	 	<p>
	 		<input type="checkbox" id="all" name="" onclick="selectCheckBoxes('div1', this.checked)"/>全部   
	 	</p>	
	 	<p>
	 		<input type="checkbox" id="zz" name=""/>住宅  &nbsp;&nbsp;&nbsp; 
	 		<input type="checkbox" id="bgl" name=""/>办公楼    &nbsp;&nbsp;&nbsp;  
	 		<input type="checkbox" id="syjls" name=""/>商业及零售  &nbsp;&nbsp;&nbsp;
	 		<input type="checkbox" id="xsqkf" name=""/>新市区开发   &nbsp;&nbsp;&nbsp;  
	 		<input type="checkbox" id="jcjs" name=""/>基础建设
	 	</p>
		<p>
	 		<input type="checkbox" id="gysyss" name=""/>公用事业设施  &nbsp;&nbsp;&nbsp; 
	 		<input type="checkbox" id="jt" name=""/>交通    &nbsp;&nbsp;&nbsp;  
	 		<input type="checkbox" id="syjtrq" name=""/>石油及天然气  &nbsp;&nbsp;&nbsp;
	 		<input type="checkbox" id="sf" name=""/>司法  &nbsp;&nbsp;&nbsp;  
	 		<input type="checkbox" id="ny" name=""/>农业
	 	</p>
</div>  

选中操作js代码:


<script type="text/javascript">
  		//全选择
  	function selectCheckBoxes(domId,value){
  			var inputs = document.getElementById(domId).getElementsByTagName("input"); 
       		for(var i = 0; i < inputs.length; i++) { 
	            if (inputs[i].type == 'checkbox') { 
	                inputs[i].checked=value; 
	            } 
        	} 
  	}
  		
  	</script>
转载请注明原文链接:首页 -> 技术交流 -> 前端开发 -> div下实现checkbox全部选中
  • 支付宝打赏
  • 微信打赏

China.BeiJing

如果说人生是自我编写的程序,那么青春就是其中意味深长的代码