<!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>点击全选示例</title> </head> <body> <input type="checkbox" id="selectAll"> 全选 <input type="checkbox" class="checkboxItem"> 选项 1 <input type="checkbox" class="checkboxItem"> 选项 2 <input type="checkbox" class="checkboxItem"> 选项 3 <script> // 获取全选复选框和其他复选框元素 var selectAllCheckbox = document.getElementById('selectAll'); var checkboxItems = document.getElementsByClassName('checkboxItem'); // 为全选复选框添加点击事件 selectAllCheckbox.addEventListener('click', function () { for (var i = 0; i < checkboxItems.length; i++) { checkboxItems[i].checked = this.checked; } }); </script> </body> </html>
在上述代码中，首先通过 getElementById 和 getElementsByClassName 方法获取到全选复选框和其他复选框的元素。然后，给全选复选框添加了点击事件监听器。当全选复选框被点击时，通过一个循环将其他复选框的选中状态设置为与全选复选框相同。
