关于全选按钮和复选框只能选中其中一个的js写法
来源:互联网 发布:淘宝砍价师怎么砍价的 编辑:程序博客网 时间:2024/04/28 13:05
在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)"/>早退
- 关于全选按钮和复选框只能选中其中一个的js写法
- js全选,全选以后,如果选中其中一个,全选效果取消,如果复选框全部选中,全选按钮自动也被选中
- html,javaScript中怎么控制复选框checkbox的全选,全不选,以及全选中,全选按钮选中,其中一个或者多个没选,则全选按钮不被选中
- html,javaScript中怎么控制复选框checkbox的全选,全不选,以及全选中,全选按钮选中,其中一个或者多个没选,则全选按钮不被选中
- 关于复选框全选,当其中的一个复选框去掉勾时,全选的复选框的勾也去了,当除了全选框的其他复选框都被选中时,全选框也被选中。
- 复选框只能选中一个
- js全选实现和判断是否有复选框选中
- JS复选框checkbox:父复选框全选全取消子选框和子选框选则而父选框自动选中的代码
- js html复选框的全选和非全选
- 【JS】复选框的全选和取消全选
- js实现复选框全选效果,已经用后台获取选中的复选框的值
- 全选复选框和取消所有复选框 jquery全选复选框 js全选复选框
- 使用JS判断单选按钮和复选框是否被选中的代码
- 复选框的全选 js
- flexgrid的全选按钮翻页后复选框还是选中状态的bug
- 关于 js 实现复选框 全选
- JS代码:复选框全选事件,选中行变色
- JS复选框的全选和反选
- ArcGIS Flex API 中缩放控件样式设计(转帖)
- c# Regex常用
- Lisp语言:函数的可选参数,剩余参数以及关键字参数
- Android getevent/senevent
- TortoiseSVN 使用图解
- 关于全选按钮和复选框只能选中其中一个的js写法
- ADO连接SQL Server数据库
- 黑马程序员-动态代理
- Silverlight 5 Datafrom Template Bug
- 12个球一个天平,现知道只有一个和其它的重量不同,问怎样称才能用三次就找到那个球
- Facebook早期投资者赞助20名年轻人弃学创业(草根网)
- 在Windows Server 2008 X64中通过.NET程序调用32位com组件
- JAVA 通用克隆方法
- 新浪SAE开放独立域名绑定功能