实践 - 全选反选

本文导航

  1. 本次实践的主要训练知识点
  2. 优化后的代码

  • 作者：KK

  • 发表日期：2016.2.25

本次实践的主要训练知识点

  • for循环

  • 数组(Dom元素数组)

  • checkbox元素对象的checked属性了解

  • 典型的全选反选功能思路初练成

  • change事件的加深认识

本文章教大家如何用JS代码实现平时在网页上常见的"全选"和"反选"功能

思路就是用getElementsByTagClassName方法把相同class的标签(input)对象取出来并且设置它们的checked属性

<html>
</head>
<meta charset="UTF-8">
<title>实现全选反选</title>
<script>
//这个函数在#chkCheckAll中被onchange属性绑定了,所以当钩选状态改变时会自动触发这个函数
function checkAll(){
	var chkCheckAll = document.getElementById('chkCheckAll'),
		cuisineList = document.getElementsByClassName('cuisine');
	
	for(var i = 0; i < cuisineList.length; i++){
		cuisineList[i].checked = chkCheckAll.checked;
	}
}
</script>
</head>
<body>
	<ul>
		<li>
			<input type="checkbox" class="cuisine"/>白菜
		</li>
		<li>
			<input type="checkbox" class="cuisine"/>红菜
		</li>
		<li>
			<input type="checkbox" class="cuisine"/>黑菜
		</li>
	</ul>
	<input type="checkbox" id="chkCheckAll" onchange="checkAll()"/>
	<label for="chkCheckAll" style="cursor:pointer">全选</label>
</body>
</html>

效果如下:

优化后的代码

由于这是基础教程,所以上面代码尽量写得简单,现在这里是另一个版本,你再消化一下看看能学到些什么,加固了些什么知识点

<html>
</head>
<meta charset="UTF-8">
<title>实现全选反选</title>
<script>
window.addEventListener('load', function(){
	document.getElementById('chkCheckAll').onchange = function(){
		var cuisineList = document.getElementsByClassName('cuisine');
		for(var i = 0; i < cuisineList.length; i++){
			cuisineList[i].checked = this.checked; //this就是被绑定事件的元素对象,就是#chkCheckAll
		}
	}
});
</script>
</head>
<body>
	<ul>
		<li>
			<input type="checkbox" class="cuisine"/>白菜
		</li>
		<li>
			<input type="checkbox" class="cuisine"/>红菜
		</li>
		<li>
			<input type="checkbox" class="cuisine"/>黑菜
		</li>
	</ul>
	<input type="checkbox" id="chkCheckAll"/>
	<label for="chkCheckAll" style="cursor:pointer">全选</label>
</body>
</html>