js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

时间:2022-05-22 15:28:00

用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中。

详解:

有两种方式使<input type="checkbox" />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg:<input type="checkbox" checked />

方法二:使用javascript使input对象的checked="true";  eg: document.getElementsByTagName('input')[0].checked='true';

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oInput = aInput[0];
var a = 0;
var b = 0;
aInput[0].onclick = function(){
for (var i = 0; i < aInput.length; i++) {
if(aInput[0].checked == true){
aInput[i].checked = true;
}else{
aInput[i].checked = false;
}
}
};
for (var i = 1; i < aInput.length; i++) {
aInput[i].onclick = function(){
a = 0;
b = 0;
for (var i = 1; i < aInput.length; i++) {
if (aInput[i].checked == false) {
a++;
}else {
b++;
}
}
if(a>0){
oInput.checked = false;
}else if(b==aInput.length-1){
oInput.checked = true;
};
};
}
};
</script>
</head>
<body>
<p><input type="checkbox" name="" />全选</p>
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
</body>
</html>