复选框的全选和全不选功能(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.属性值=“…”方法。