全选,不选和反选.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选</title>
<style>
input{
display: block;
}
</style>
<script>
window.onload = function () {
var btns = document.getElementsByTagName('button');
var check = document.getElementById('check');
var checks = check.getElementsByTagName('input');
btns[0].onclick = function () {

for (var i = 0; i < checks.length; i++) {
checks[i].checked = true;
}
}
btns[1].onclick = function () {

for (var i = 0; i < checks.length; i++) {
checks[i].checked = false;
}
btns[2].onclick = function () {

for (var i = 0; i < checks.length; i++) {
if (checks[i].checked == true) 
{
checks[i].checked = false;
}
else{
checks[i].checked = true;
}
}
}
}
}
</script>
</head>
<body>
<button>全选</button>
<button>不选</button>
<button>反选</button>
<div id="check">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</div>
</body>
</html>

刚执行程序反选没反应,点过全选不选后才会有反应是怎么回事>

自由的气息

浏览 1447回答 1

1回答

hou110

btns[1].onclick = function() { for(var i = 0; i < checks.length; i++) { checks[i].checked = false; } btns[2].onclick = function() { for(var i = 0; i < checks.length; i++) { if(checks[i].checked == true) { checks[i].checked = false; } else { checks[i].checked = true; } } } }代码结构有问题，你的btns[2].onclick嵌套进btns[1].onclick里面了

随时随地看视频慕课网APP