<!DOCTYPE html> <html> <head> <title>全选、单选、反选</title> </head> <body> <input type="checkbox" id="selectAll"> 全选<br> <input type="checkbox" class="item"> 选项1<br> <input type="checkbox" class="item"> 选项2<br> <input type="checkbox" class="item"> 选项3<br> <!-- 更多选项... --> <script> const selectAllCheckbox = document.getElementById('selectAll'); const itemCheckboxes = document.getElementsByClassName('item'); // 全选 selectAllCheckbox.addEventListener('change', function() { for (let i = 0; i < itemCheckboxes.length; i++) { itemCheckboxes[i].checked = this.checked; } }); // 单选 for (let i = 0; i < itemCheckboxes.length; i++) { itemCheckboxes[i].addEventListener('change', function() { let allChecked = true; for (let j = 0; j < itemCheckboxes.length; j++) { if (!itemCheckboxes[j].checked) { allChecked = false; break; } } selectAllCheckbox.checked = allChecked; }); } // 反选 function toggleSelectAll() { for (let i = 0; i < itemCheckboxes.length; i++) { itemCheckboxes[i].checked = !itemCheckboxes[i].checked; } let allChecked = true; for (let j = 0; j < itemCheckboxes.length; j++) { if (!itemCheckboxes[j].checked) { allChecked = false; break; } } selectAllCheckbox.checked = allChecked; } </script> </body> </html>
上述事例创建了一个全选复选框和多个选项复选框。通过 JavaScript 实现了全选、单选和反选的功能。
在 JavaScript 部分，我们首先获取到全选复选框和选项复选框的引用。然后，为全选复选框添加一个 change 事件监听器，当选择状态发生变化时，将其状态应用到所有选项复选框上。
接着，使用一个循环为每个选项复选框添加 change 事件监听器，当任意一个选项复选框的状态发生变化时，判断是否所有选项复选框都被选中，如果是，则将全选复选框的状态设为选中；如果不是，则将全选复选框的状态设为未选中。
最后，我们定义了一个名为 toggleSelectAll 的函数来实现反选的功能。该函数会遍历所有选项复选框，并将其选中状态取反。然后，再次判断是否所有选项复选框都被选中，并根据结果设置全选复选框的状态。
