dom中实现全选复选框的实例。

最新推荐文章于 2024-03-24 00:16:48 发布

weixin_30955617

最新推荐文章于 2024-03-24 00:16:48 发布

阅读量219

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qianqian528/p/7692791.html

版权

PS：这个题考试时没有做出来，摘录下来好好作为实例。

<script type="text/javascript">
	//2、实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选

	//全选/全不选
	/*
	1、找到全选框
	2、获取全选框选中属性
	3、获取所有的 CheckBox元素
	4、把这些CheckBox元素的选中属性设为全选框的选中属性
	*/

	function check(obj){
	// 1、找到全选框
	// 2、获取全选框选中属性
	// 3、获取所有的 CheckBox元素
	var ckArr = document.getElementsByName("list");

	// 4、把这些CheckBox元素的选中属性设为全选框的选中属性
	for(var i = 0; i<ckArr.length;i++){
	if(obj.checked){
	ckArr[i].setAttribute("checked","checked");
	}else{
	ckArr[i].removeAttribute("checked");
	}

	}
	}

	/*
	1、获取所有CheckBox元素
	2、每个都判断是否选中
	3、如果有没有选中的全选框不选中反之选中
	*/





	</script>
	</head>

	<body>

	<table width="100%" border="1" >
	<tr>
	<td><input id="qx" type="checkbox" onClick="check(this)">全选</td>
	<td>表头</td>
	<td>表头</td>
	<td>表头</td>
	</tr>
	<tr>
	<td><input name="list" type="checkbox"></td>
	<td>单元格</td>
	<td>单元格</td>
	<td>单元格</td>
	</tr>
	<tr>
	<td><input name="list" type="checkbox"></td>
	<td>单元格</td>
	<td>单元格</td>
	<td>单元格</td>
	</tr>
	<tr>
	<td><input name="list" type="checkbox"></td>
	<td>单元格</td>
	<td>单元格</td>
	<td>单元格</td>
	</tr>


	</table>
	</body>
	</html>

	<script type="text/javascript">
	var ckarr = document.getElementsByName("list");

	for(var i = 0; i<ckarr.length;i++){
	ckarr[i].setAttribute("onclick","isxz()");
	}

	function isxz(){
	//1、获取所有CheckBox元素
	var flag = true;
	// 2、每个都判断是否选中
	for(var i = 0; i<ckarr.length;i++){
	if(!ckarr[i].checked){
	flag = false;
	}
	}
	// 3、如果有没有选中的全选框不选中反之选中
	//flag = true ; 全部选中
	//flag = false; 有没有选中的
	if(flag){
	document.getElementById("qx").checked = true;
	}else{
	document.getElementById("qx").checked = false;
	}
	}



	</script>