JS练习笔记（2）--复选框（全选/全不选/反选）

我是按照实例索引写的练习，这次是写到第2课的第12个练习，发现自己写的和作者的源码差距比较大，源码的代码很具有参考性，所以贴上来并加好注释，希望自己以后也能有这样的逻辑解决问题。

首先放图~需要完成的页面是酱紫的：



我的笨方法：

通过if来判断然后for循环，功能都能实现，但是比如点击全选后全选文字变成全不选，我只是在不断的判断语句里加语句，自己写的过程中也觉得很麻烦。源码就解决了这个问题，直接写了一个函数，在点击全选和反选的时候调用就好了。话不多说了，贴源码吧。

<script type="text/javascript">
window.onload = function ()
{
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function ()
{
for (var i = 1, n = 0; i < oInput.length; i++)//i为计数器，i从1开始
{
oInput[i].checked && n++//遍历所有的input元素，被勾选则checked值为true，则n加1
}
oInput[0].checked = n == oInput.length - 1;//当被勾选的input元素与所有可勾选的元素个数相等，第一个input元素显示已勾选，即全选的那个复选框
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};//当全选的复选框被勾选，文字变成全不选，否则是全选

//全选/全不选
oInput[0].onclick = functio
4000
n ()//全选复选框的点击事件
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = this.checked;   //遍历所有的input元素，并将第一个元素的checked值赋给每个input元素，实现全选和全不选
}
isCheckAll()
};
//反选
oA.onclick = function () //反选的点击事件
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked//反转选中的状态
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
}
</script>

新手博客，请多多指教，如果有不对的地方，希望大家可以指正ヽ(･ω･´ﾒ)