<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Check All Example</title> </head> <body> <input type="checkbox" id="checkAll"> Check All <br> <input type="checkbox" class="checkbox"> Item 1 <br> <input type="checkbox" class="checkbox"> Item 2 <br> <input type="checkbox" class="checkbox"> Item 3 <br> <script> var checkAll = document.getElementById('checkAll'); var checkboxes = document.querySelectorAll('.checkbox'); // 全选/全不选功能 checkAll.addEventListener('change', function() { checkboxes.forEach(function(checkbox) { checkbox.checked = checkAll.checked; }); }); // 每个复选框改变时检查是否所有复选框都被选中 checkboxes.forEach(function(checkbox) { checkbox.addEventListener('change', function() { var allChecked = true; checkboxes.forEach(function(checkbox) { if (!checkbox.checked) { allChecked = false; } }); checkAll.checked = allChecked; }); }); </script> </body> </html>
在这个示例中，我们首先获取全选复选框和所有子复选框的元素，然后为全选复选框和每个子复选框添加事件监听器。当全选复选框的状态改变时，我们将所有子复选框的状态设置为与全选复选框相同。当任何一个子复选框的状态改变时，我们检查是否所有子复选框都被选中，如果是则将全选复选框设置为选中状态，否则设置为未选中状态。
这样就实现了简单的全选和全不选功能。你可以根据自己的需求对代码进行定制和扩展。
