JavaScript 实现全选、单选和反选
<!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 的函数来实现反选的功能。该函数会遍历所有选项复选框，并将其选中状态取反。然后，再次判断是否所有选项复选框都被选中，并根据结果设置全选复选框的状态。