本文介绍了三种实现网页中checkbox全选与全不选功能的方法，包括利用document.all、getElementsByTagName和setName等DOM操作，以及一个方便的函数check_all用于统一控制。方法二操作不便，无法分别控制不同组的checkbox；而方法三通过检查当前元素的状态，实现了简洁且高效的全选与全不选功能。
checkbox全选/全不选
方法一：
function checkAll(cName) {
var code_Values = document.all[checkbox_name];
if (code_Values.length) {
for ( var i = 0; i < code_Values.length; i++) {
code_Values[i].checked = true;
}
} else {
code_Values.checked = true;
}
}
function uncheckAll(cName) {
var code_Values = document.all[checkbox_name];
if (code_Values.length) {
for ( var i = 0; i < code_Values.length; i++) {
code_Values[i].checked = false;
}
} else {
code_Values.checked = false;
}
}
<input type="checkbox" name="check" onclick="checkAll('check');"/><a onclick="check.click()">全选</a>
方法二：
function checkAll() {
var code_Values = document.getElementsByTagName("input");
for (i = 0; i < code_Values.length; i++) {
if (code_Values[i].type == "checkbox") {
code_Values[i].checked = true;
}
}
}
function uncheckAll() {
var code_Values = document.getElementsByTagName("input");
for (i = 0; i < code_Values.length; i++) {
if (code_Values[i].type == "checkbox") {
code_Values[i].checked = false;
}
}
}
<input type="checkbox" name="check" onclick="checkAll('check');"/><a onclick="check.click()">全选</a>
方法三：
function check_all(obj, cName) {
var checkboxs = document.getElementsByName(cName);
for ( var i = 0; i < checkboxs.length; i+=1) {
checkboxs[i].checked = obj.checked;
}
}
<input type="checkbox" name="check" onclick="checkAll(this,'check');"/><a onclick="check.click()">全选</a>
第二种方法显然是不方便的方法，如果页面上有多个checkbox组，就不能分别控制。
第三种方法最为简便，一个checkbox就可以了。
扫一扫
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
