<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="全选" id="but1">
<input type="button" value="反选" id="but2">
<input type="button" value="不选" id="but3"><br />
<div>
<input type="checkbox">吃饭
<input type="checkbox">睡觉
<input type="checkbox">打豆豆
<input type="checkbox">看书
<input type="checkbox">娱乐
<input type="checkbox">爱学习
<input type="checkbox">LOL
<input type="checkbox">王者
<input type="checkbox">绝地
</div>
<script>
// 效果描述:点击按钮,实现对应的选择效果
// 获取元素
var btn1 = document.getElementById("but1");
var btn2 = document.getElementById("but2");
var btn3 = document.getElementById("but3");
var div1 = document.getElementById("div1");
var inps = document.getElementsByTagName("input");
// 添加“全选”点击事件
btn1.onclick = function () {
for (var i = 0; i < inps.length; i++) {
inps[i].checked = true;
}
}
// 添加“反选”按钮点击事件
btn2.onclick = function () {
for (var i = 0; i < inps.length; i++) {
inps[i].checked=!inps[i].checked;
}
}
// 添加“不选”点击事件
btn3.onclick = function () {
for (var i = 0; i < inps.length; i++) {
inps[i].checked = false;
}
}
</script>
</body>
</html>