用JavaScript实现全选-反选

实现全选-反选

在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。
样式如下所示：
在这里插入图片描述

样式代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>全选-反选</title>
</head>
<body>
	<h2>请选择您的兴趣爱好</h2>
	<input type="checkbox" value="全选"  id="chkAll"/><label for="chkAll">全选</label>
	<input type="button" value="反选" id="reverse" />
	<ul id="favors">
		<li><input type="checkbox" value="" />打篮球</li>
		<li><input type="checkbox" value="" />打篮球</li>
		<li><input type="checkbox" value="" />看电影</li>
		<li><input type="checkbox" value="" />看书</li>
		<li><input type="checkbox" value="" />书法</li>
		<li><input type="checkbox" value="" />唱歌</li>
		<li><input type="checkbox" value="" />徒步旅行</li>
	</ul>
</body>
</html>

JavaScript部分如下所示：

function $(id){
				return document.getElementById(id);
			}
			window.onload = function(){

				$("chkAll").onclick = function(){
					var fvs = $("favors").getElementsByTagName("input");
					for (var i = 0; i < fvs.length; i++) {
						fvs[i].checked = $("chkAll").checked; 
					};
				}

				$("reverse").onclick = function(){
					var ipts = $("favors").getElementsByTagName("input");
					for (var i = 0; i < ipts.length; i++) {
						ipts[i].checked = !ipts[i].checked;
					};
				}
				var fvs = $("favors").getElementsByTagName("input");
				for (var i = 0; i < fvs.length; i++) {
					fvs[i].onclick = function(){
						var  isChkAll = true;
						for (var i = 0; i < fvs.length; i++) {
							if(!fvs[i].checked){
								isChkAll = false;
								break;
							}
						};
						$("chkAll").checked = isChkAll;
					}
				};
		}