JavaScript高手之路：全选不选反选效果
Posted 「已注销」
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高手之路：全选不选反选效果相关的知识，希望对你有一定的参考价值。
前几个章节已经讲述了javascript对象定义的几种方式，并且用构造函数方式和字面来嗯方式来封装了一些数学相关的类和一些简单的特效，相信读者对JS面向对象编程有个大概轮廓了。
所以，接下来的几个章节，每个章节就是一个简单有趣的小案例，这样有利于我们对JS对象封装的学习兴趣。今天我们先来实现全选、不选、反选的效果，这个效果在网页中经常见到，比如网易邮箱。
页面效果如图：
页面中存在3个按钮和一排checkbox按钮，当用户选中全选按钮的时候所有的checkbox则被选中;当用户选中不选按钮的时候所有的checkbox则全部为未选中;当用户选中反选的时候则已选中的checkbox标志为未选中，未选中的按钮被标志为已选择。
页面html标签为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选不选反选</title>
</head>
<body>
<div id="check">
<input type="button" class="button" value="全选"/>
<input type="button" class="button" value="不选"/>
<input type="button" class="button" value="反选"/>
<br />
<input type="checkbox" class="checkbox" value="">橘子<br />
<input type="checkbox" class="checkbox" value="">苹果<br />
<input type="checkbox" class="checkbox" value="">香蕉<br />
<input type="checkbox" class="checkbox" value="">葡萄<br />
<input type="checkbox" class="checkbox" value="">西瓜<br />
<input type="checkbox" class="checkbox" value="">荔枝<br />
<input type="checkbox" class="checkbox" value="">芒果<br />
<input type="checkbox" class="checkbox" value="">猕猴桃
</div>
</body>
</html>
该页面有3个button按钮和8个checkbox按钮，为了便于JS代码选择出这两种不同的input，给button按钮加上class为button，给checkbox加上class为checkbox。接下来我们先来实现全选按钮效果：
var Checkbox = function(id)
//根据id获取dom对象
var obj = document.getElementById(id);
//获取3个button按钮
this.aBtn = obj.getElementsByClassName("button");
this.aCheckBox = obj.getElementsByClassName("checkbox");
//实现全选按钮效果
this.checkAll = function ()
//将this赋值给变量that
that = this;
//给第一个按钮注册单击事件
this.aBtn[0].onclick = function ()
//循环遍历每一个checkbox,给他们赋值选中
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = true;
;
Checkbox类的构造函数有一个参数id，通过document.getElementById()方法获取指向页面id为check的div容器dom节点，然后再通过该节点获取class为button的按钮节点和class为checkbox的复选框节点，在全选按钮的实现方法中，先给第一个按钮注册单击监听事件，第一个按钮的下标为this.aBtn[0],所以得给这个按钮加监听事件。当用户选中这个按钮时，循环遍历每一个checkbox，并给对应的checkbox节点的属性checked赋值为true。
同样的，不选按钮的实现思路和全选相同，只不过给每一个checkbox节点的属性checked赋值的时候，赋值为false。对应的代码如下：
//不选按钮
this.unCheckAll = function ()
//将this赋值给变量that
that = this;
this.aBtn[1].onclick = function ()
//循环遍历每一个checkbox,给他们赋值不选中
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = false;
;
反选按钮的思路则也是在for循环里面做相应的判断，另当前checkbox节点的checked属性值等于当前值的取反即可。
//反选
this.reverseCheck = function ()
//将this赋值给变量that
that = this;
this.aBtn[2].onclick = function ()
//循环遍历每个checkbox,赋值相反
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = !that.aCheckBox[i].checked;
整个页面的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选不选反选</title>
<script>
var Checkbox = function(id)
//根据id获取dom对象
var obj = document.getElementById(id);
//获取3个button按钮
this.aBtn = obj.getElementsByClassName("button");
this.aCheckBox = obj.getElementsByClassName("checkbox");
//实现全选按钮效果
this.checkAll = function ()
//将this赋值给变量that
that = this;
//给第一个按钮注册单击事件
this.aBtn[0].onclick = function ()
//循环遍历每一个checkbox,给他们赋值选中
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = true;
;
//是选不选按钮
this.unCheckAll = function ()
//将this赋值给变量that
that = this;
this.aBtn[1].onclick = function ()
//循环遍历每一个checkbox,给他们赋值不选中
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = false;
;
//反选
this.reverseCheck = function ()
//将this赋值给变量that
that = this;
this.aBtn[2].onclick = function ()
//循环遍历每个checkbox,赋值相反
for(var i = 0; i < that.aCheckBox.length; i++)
that.aCheckBox[i].checked = !that.aCheckBox[i].checked;
window.onload = function ()
var checkbox = new Checkbox('check');
checkbox.checkAll();
checkbox.unCheckAll();
checkbox.reverseCheck();
</script>
</head>
<body>
<div id="check">
<input type="button" class="button" value="全选"/>
<input type="button" class="button" value="不选"/>
<input type="button" class="button" value="反选"/>
<br />
<input type="checkbox" class="checkbox" value="">橘子<br />
<input type="checkbox" class="checkbox" value="">苹果<br />
<input type="checkbox" class="checkbox" value="">香蕉<br />
<input type="checkbox" class="checkbox" value="">葡萄<br />
<input type="checkbox" class="checkbox" value="">西瓜<br />
<input type="checkbox" class="checkbox" value="">荔枝<br />
<input type="checkbox" class="checkbox" value="">芒果<br />
<input type="checkbox" class="checkbox" value="">猕猴桃
</div>
</body>
</html>
驱动代码在那个window.onload函数中，当页面加载完毕之后即可创建一个Checkbox对象，并调用了checkAll、unCheckAll、reverseCheck函数对这仨按钮进行监听，代码大致如此。
以上是关于JavaScript高手之路：全选不选反选效果的主要内容，如果未能解决你的问题，请参考以下文章