全选反选取消 js函数

最新推荐文章于 2023-12-22 09:36:01 发布

最新推荐文章于 2023-12-22 09:36:01 发布 · 213 阅读

文章标签：

#js 实用小方法

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用JavaScript实现网页表单中复选框的全选、取消及反选功能。提供了通过按钮、复选框及超链接触发这些操作的方法，并详细解释了对应的函数实现。

触发方法:

1.按钮(button)
[code]
<input type="button" value="全选" onclick="checkboxAll(document.fromName)"/>
[/code]

2.复选框(checkbox)
[code]
<input type="checkbox" name="all" value="checkboxAll" onclick="selectOther()"/>反选
[/code]
[color=red]注：方法名和name名不可相同[/color]

3.超链接(a)
[code]
A.<a href="#" onclick="SelectAll()">全选</a>
B.<a href="javascript:selectClear(document.fromName)">取消</a>
[/code]

方法体：

1.全选
[code]
function SelectAll() {
var obj=document.getElementById("userList");
for(var i=0 ;i<obj.elements.length;i++){
if(obj.elements[i].type.toLowerCase()=="checkbox"){
e=obj.elements[i];
e.checked=true;
}
}
}
[/code]

2.取消
[code]
function selectClear(obj) {
for(var i=0 ;i<obj.elements.length;i++){
if(obj.elements[i].type.toLowerCase()=="checkbox"){
e=obj.elements[i];
e.checked= false;
}
}
}
[/code]

3. 反选
[code]
function selectOther(obj) {
for(var i = 0; i < obj.elements.length; i++)
if(obj.elements[i].type.toLowerCase() == "checkbox") {
if(!obj.elements[i].checked)
obj.elements[i].checked = true;
else
obj.elements[i].checked = false;
}
}
[/code]