实战演练：DOM事件操作第二课
最编程
2024-02-15 11:39:02
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM事件练习2</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<button id="btn1">全选</button>
<button id="btn2">全不选</button>
<input type="checkbox" id="btn3" />全选
<ul id="goods">
<li><input type="checkbox" />小狗狗</li>
<li><input type="checkbox" />小猫猫</li>
<li><input type="checkbox" />小兔兔</li>
</ul>
<script>
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const btn3 = document.getElementById("btn3");
// 拿到goods下面的input
const inputs = document.querySelectorAll("#goods input");
console.log(inputs);
const changeStatus = (status) => {
inputs.forEach((input) => {
input.checked = status;
});
};
btn1.onclick = () => {
changeStatus(true);
};
btn2.onclick = () => {
changeStatus(false);
};
btn3.onchange = () => {
changeStatus(btn3.checked);
};
</script>
</body>
</html>