在web开发中,列表页面上经常要用到全选按钮。下面是我对于全选按钮的写法:
js代码:
<script type="text/javascript">
function quanxuan(){
var obj = document.getElementById("checkall");//获得全选按钮对象
var list1 = document.getElementsByTagName("input");//得到页面上所有的input对象
var list2 = new Array();
//过滤出所需要全选的input对象
for(i = 0;i < list1.length; i++){
if(list1[i].name!="checkall"){
list2.push(list1[i]);
}
}
//如果全选按钮选中,则list2集合中的input对象都选中
if(obj.checked){
for(i = 0;i < list2.length; i++){
list2[i].checked = true;
}
}
//如果全选按钮未选中,则list2集合中的input对象都未选中
else{
for(i = 0;i < list2.length; i++){
list2[i].checked = false;
}
}
}
</script>
html代码:
<table>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
<td>列4</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td colspan="4" align="left"><input type="checkbox" onclick="quanxuan()" name="checkall" id="checkall">全选</td>
</tr>
</table>
关于以上写法的拓展:
如果页面上除了类型为checkbox的input之外,还有其他类型的input,诸如:button、text之类的,那么var list1 = document.getElementsByTagName("input"),其中就会有我们不需要的对象。这个时候我们就
要对list1里面的对象进行过滤了。我们可以把要获取的input的范围限定在某一个div里,例如可以在table外面套一个div,id为check,再获取id为check的div这个对象,var obj 1= document.getElementById("check"),
然后在obj1这个对象里获取input对象。这样做了之后可能还有我们不需要的对象,那么还需要进一步过滤。接下来,我们可以通过input标签的名字或属性来过滤,就像上面的代码中一样,通过名字过滤,我过滤掉了全选按
钮,有需要的话,可以通过属性过滤,if(list1[i].type!="checkbox"),这就要依具体情况而定了。
关于复选框只能选中其中一个的实现:
js代码:
function checkel(obj){
var l = document.getElementsByName("lateorearly");
if(obj.checked){
for(i=0;i<l.length;i++){
l[i].checked=false;//全部不选中
}
obj.checked=true;//选中相应的checkbox
}
}
html代码:
<input type="checkbox" name="lateorearly" id="late" onclick="checkel(this)"/>迟到
<input type="checkbox" name="lateorearly" id="early" onclick="checkel(this)"/>早退