复选框的全选和全不选功能（setAttribute方式和.checked方式）

复选框的全选和全不选功能（setAttribute方式和.checked方式）

在网页设计中，复选框是一个经常用到的小组件，也日常会用到全选和全不选功能，在但有一些细节经常会被忽略。如以下案例：

方式一：

<!--html-->
<table id="table">
    <caption>客户信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>吴彦祖</td>
        <td>男</td>
        <td><a href="javascript:void(0)" onclick=fun_del(this)>删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>江疏影</td>
        <td>女</td>
        <td><a href="javascript:void(0)" onclick=fun_del(this)>删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>戚薇</td>
        <td>女</td>
        <td><a href="javascript:void(0)" onclick=fun_del(this)>删除</a></td>
    </tr>
</table>
<!--js-->
<script>
//全选功能
var sel_all=document.getElementById("sel_all");
sel_all.onclick=function (){
    //获取checkbox数组
    var cbs=document.getElementsByName("cb");
    //遍历checkbox数组
    for (var i = 0; i < cbs.length; i++) {
        //为每一个checkbox添加属性
       cbs[i].setAttribute("checked","true");
    }
}
//全不选功能
var sel_none=document.getElementById("sel_none");
sel_none.onclick=function (){
    //获取checkbox数组
    var cbs=document.getElementsByName("cb");
    //遍历checkbox数组
    for (var i = 0; i < cbs.length; i++) {
        //为每一个checkbox添加元素
       cbs[i].setAttribute("checked","false");
    }
}
</script>

先通过getElementById获取对应的按钮并为其设置点击事件，本身一组复选框都要设置相同的name，通过name获取元素并生成数组，再遍历数组后为其设置checked属性。这段代码看起来没有什么瑕疵，但在运行后，全选没问题，但全不选就失灵，打断点后发现checked='false’不能生效。查看w3cschool发现**复选框的checked属性值只有checked并没有true或者false，只是浏览器将checked=true解析为checked=checked。**于是作出以下改动：

<!--全不选功能-->
<script>
var sel_none=document.getElementById("sel_none");
sel_none.onclick=function (){
    	//获取checkbox数组
    var cbs=document.getElementsByName("cb");
    	//遍历checkbox数组
    for (var i = 0; i < cbs.length; i++) {
    	//为每一个checkbox添加属性
        cbs[i].removeAttribute("checked");
   }
}
</script>

方式二：

<script>
//全选功能
var sel_all=document.getElementById("sel_all");
sel_all.onclick=function (){
    //获取checkbox数组
    var cbs=document.getElementsByName("cb");
    //遍历checkbox数组
    for (var i = 0; i < cbs.length; i++) {
        //为每一个checkbox添加属性
        cbs[i].checked=true;
    }
}
//全不选功能
var sel_none=document.getElementById("sel_none");
sel_none.onclick=function (){
    //获取checkbox数组
    var cbs=document.getElementsByName("cb");
    //遍历checkbox数组
    for (var i = 0; i < cbs.length; i++) {
        //为每一个checkbox添加属性
        cbs[i].checked=false;
    }
}
</script>

这种方式更加简单直接，通过name.属性值=“…”来直接设置。但这里的属性值要用true和false来设置。

注：两种方式不能混淆！！！使用setAttribute不能用false（也不建议用true），但name.属性值=“…”不能用checked！！

如果是单次改动建议使用setAttribute方法，像复选框这种改动建议使用name.属性值=“…”方法。