可以添加一个“全选”复选框,用 JavaScript 来实现“全选/取消全选”的功能。
HTML 代码示例:
Name
Age
Gender
John
25
Male
Jane
30
Female
JavaScript 代码示例:
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.checkbox');
selectAll.addEventListener('change', function() {
checkboxes.forEach(function(checkbox) {
checkbox.checked = selectAll.checked;
});
});
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
const allChecked = Array.from(checkboxes).every(function(checkbox) {
return checkbox.checked;
});
selectAll.checked = allChecked;
});
});
在这个示例中,我们添加了一个全选复选框,并使用事件监听器来实现全选/取消全选的功能。当点击全选复选框时,我们使用 forEach() 方法遍历所有其他复选框,并将它们的 checked 属性设置为全选框的 checked 属性。当点击其他复选框时,我们检查所有复选框是否都被选中,如果是,我们将全选框的 checked 属性也设置为 true。