全选;
全不选:
反选:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<p><input type="checkbox" />苹果</p>
<p><input type="checkbox" />菠萝</p>
<p><input type="checkbox" />桃子</p>
<p><input type="checkbox" />哈密瓜</p>
</form>
<button id="qx">全选</button>
<button id="qbx">全不选</button>
<button id="fx">反选</button>
</body>
<script>
// 1.全选
let qx = document.getElementById("qx");
qx.addEventListener("click", function () {
let input = document.querySelectorAll("input");
for (let i = 0; i < input.length; i++) {
input[i].checked = true;
}
});
// 全不选
let qbx = document.getElementById("qbx");
qbx.addEventListener("click", function () {
let input = document.querySelectorAll("input");
for (let i = 0; i < input.length; i++) {
input[i].checked = false;
}
});
// 反选
let fx = document.getElementById("fx");
fx.addEventListener("click", function () {
let input = document.querySelectorAll("input");
for (let i = 0; i < input.length; i++) {
if (input[i].checked===true) {
input[i].checked=false
}
else{
input[i].checked=true
}
}
});
</script>
</html>