JavaScript全选按扭

全选

全选功能是在很多注册页面、获取用户兴趣爱好、让用户勾选一些选项等页面中常见的一种效果，本次暂时分享全选/全不选，子选框全选后全选框对应勾选。
放效果图吧


JS代码：

<script>
//注：$()获取页面元素ID，selectAll为全选框ID
//check是四个子复选框的类名
var selectAll = $("selectAll");
var arr1 = $("tBody").getElementsByClassName("check");
selectAll.onclick = function ()
{
for (var i=0;i<arr1.length;i++)
{
//将全选框选中状态赋给每个子选项栏
//全选框选即全选，不选则全不选
arr1[i].checked = this.checked;
}
}
for (var i=0;i<arr1.length;i++)
{
arr1[i].onclick = function ()
{
var flag = true;
for (var j=0;j<arr1.length;j++)
{
if (!arr1[j].checked)//如果有一个没选中，就将flag改为false
{
flag = false;
break;
}
}
selectAll.checked =flag;//将flag赋给全选框
}
}
</script>

页面布局