HTML部分：
<!DOCTYPE html> <html> <head> <title>单选、全选、全不选</title> </head> <body> <h2>请选择以下选项：</h2> <input type="checkbox" class="checkbox">选项1<br> <input type="checkbox" class="checkbox">选项2<br> <input type="checkbox" class="checkbox">选项3<br> <input type="checkbox" class="checkbox">选项4<br> <input type="checkbox" class="checkbox">选项5<br> <button id="selectAll">全选</button> <button id="deselectAll">全不选</button> </body> </html>
Javascript部分：
// 获取所有复选框 const checkboxes = document.querySelectorAll('.checkbox'); // 获取全选和全不选按钮 const selectAllButton = document.getElementById('selectAll'); const deselectAllButton = document.getElementById('deselectAll'); // 添加全选按钮的点击事件处理程序 selectAllButton.addEventListener('click', function () { checkboxes.forEach(checkbox => { checkbox.checked = true; }); }); // 添加全不选按钮的点击事件处理程序 deselectAllButton.addEventListener('click', function () { checkboxes.forEach(checkbox => { checkbox.checked = false; }); });
这段代码创建了一组复选框和两个按钮，一个用于全选，另一个用于全不选。当用户点击相应的按钮时，JavaScript会遍历所有复选框并将它们的状态设置为选中或未选中，从而实现单选、全选和全不选功能。
