这段代码实现的功能是一个简单的复选框示例,它可以进行全选、反选和取消选中操作。
实现功能:
1. 全选:当点击标签"全选"旁边的复选框时,该页面上所有具有"item"类的复选框都会被选中(或者取消选中,如果它们之前都被选中了)。
2. 反选:当点击"反选"按钮时,当前的复选框会反转它们的选中状态。如果一个选项被选中了,点击按钮后它就会被取消选中;如果一个选项未选中,点击按钮后它就会被选中。
3. 取消选中:当点击"取消选中"按钮时,所有具有"item"类的复选框都会被取消选中,并且"全选"复选框也会自动被取消选中,表示整个列表中没有任何选项被选中。
代码:
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全选、反选、取消选中</title><style>div {border: 1px solid #000;width: 260px;margin-top: 20px;margin-bottom: 20px;}</style></head><body><h1>复选框选择示例</h1><label><input type="checkbox" id="selectAll"> 全选</label><div><label><input type="checkbox" class="item"> 选项 1</label><label><input type="checkbox" class="item"> 选项 2</label><label><input type="checkbox" class="item"> 选项 3</label></div><button id="invertSelection">反选</button><button id="clearSelection">取消选中</button><script>document.addEventListener('DOMContentLoaded', function() {const selectAllCheckbox = document.getElementById('selectAll');const itemCheckboxes = document.querySelectorAll('.item');const invertButton = document.getElementById('invertSelection');const clearButton = document.getElementById('clearSelection');// 全选功能selectAllCheckbox.addEventListener('click', function() {itemCheckboxes.forEach(checkbox => {checkbox.checked = selectAllCheckbox.checked;});});// 反选功能// invertButton.addEventListener('click', function() {// itemCheckboxes.forEach(checkbox => {// checkbox.checked = !checkbox.checked;// });// selectAllCheckbox.checked = false; // 同时取消全选// });// 反选功能invertButton.addEventListener('click', function() {let allUnchecked = true; // 检查是否所有复选框未选中itemCheckboxes.forEach(checkbox => {if (checkbox.checked) {allUnchecked = false; // 只要有一个复选框选中,就不是全部未选中}checkbox.checked = !checkbox.checked; // 反选操作});// 如果全部未选中,则选中全选selectAllCheckbox.checked = allUnchecked;});// 取消选中功能clearButton.addEventListener('click', function() {itemCheckboxes.forEach(checkbox => {checkbox.checked = false;});selectAllCheckbox.checked = false; // 同时取消全选});});</script></body>
</html>
部分代码解析:
javascript"> // 全选功能selectAllCheckbox.addEventListener('click', function() {itemCheckboxes.forEach(checkbox => {checkbox.checked = selectAllCheckbox.checked;});});
这段JavaScript代码是关于一个“全选”复选框(selectAllCheckbox
)的功能。当用户点击这个“全选”复选框时,它会触发一个事件,这个事件会遍历一个复选框数组(itemCheckboxes
),并将数组中每个复选框的选中状态(checked
)设置为与“全选”复选框的选中状态相同。
下面是代码的详细解析:
javascript">selectAllCheckbox.addEventListener('click', function() {...});
- 这行代码给
selectAllCheckbox
(代表“全选”复选框的元素)添加了一个点击事件监听器。当用户点击这个复选框时,会执行提供的函数。
javascript">itemCheckboxes.forEach(checkbox => {...});
- 这行代码使用
forEach
方法来遍历itemCheckboxes
数组。itemCheckboxes
很可能是一个包含页面上其他复选框元素的数组。
javascript">checkbox.checked = selectAllCheckbox.checked;
- 在
forEach
的回调函数内部,这行代码将每个checkbox
(即itemCheckboxes
数组中的每个元素)的checked
属性设置为selectAllCheckbox
的checked
属性值。换句话说,它确保了当“全选”复选框被选中或取消选中时,数组中的所有其他复选框也会被相应地选中或取消选中。