javascript 全选与全取消功能的实现代码

在JavaScript中，实现全选与全取消功能通常涉及对一组复选框（checkboxes）的操作。以下是一个简单的示例，展示了如何使用JavaScript来实现这两个功能。

HTML 部分：

<input type="checkbox" id="selectAll"> 全选/全不选<br>
<input type="checkbox" class="itemCheckbox"> 项目1<br>
<input type="checkbox" class="itemCheckbox"> 项目2<br>
<input type="checkbox" class="itemCheckbox"> 项目3<br>

JavaScript 部分：

// 获取全选复选框
var selectAllCheckbox = document.getElementById('selectAll');

// 获取所有项目复选框
var itemCheckboxes = document.querySelectorAll('.itemCheckbox');

// 绑定全选复选框的点击事件
selectAllCheckbox.addEventListener('change', function() {
    // 如果全选复选框被选中，则选中所有项目复选框
    // 否则，取消选中所有项目复选框
    for (var i = 0; i < itemCheckboxes.length; i++) {
        itemCheckboxes[i].checked = this.checked;
    }
});

// （可选）监听项目复选框的变化，以更新全选复选框的状态
for (var j = 0; j < itemCheckboxes.length; j++) {
    itemCheckboxes[j].addEventListener('change', function() {
        // 检查是否有未选中的项目复选框
        var allChecked = true;
        for (var k = 0; k < itemCheckboxes.length; k++) {
            if (!itemCheckboxes[k].checked) {
                allChecked = false;
                break;
            }
        }
        // 根据项目复选框的选中情况更新全选复选框的状态
        selectAllCheckbox.checked = allChecked;
    });
}

这段代码首先通过ID获取全选复选框，并通过类选择器获取所有项目复选框。然后，它给全选复选框绑定了一个`change`事件监听器，当全选复选框的状态改变时，它会遍历所有项目复选框并更新它们的选中状态以匹配全选复选框的状态。

此外，代码还（可选地）为每个项目复选框绑定了`change`事件监听器，以在任一项目复选框的状态改变时检查是否有未选中的项目复选框，并据此更新全选复选框的状态。这样，用户就可以通过单独选择或取消选择项目复选框来影响全选复选框的状态，反之亦然。