js 全选

// HTML部分
<input type="checkbox" id="selectAll">全选</input>
<input type="checkbox" class="item">选项1</input>
<input type="checkbox" class="item">选项2</input>
<input type="checkbox" class="item">选项3</input>

// JavaScript部分
document.getElementById('selectAll').addEventListener('change', function() {
    var checkboxes = document.getElementsByClassName('item');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = this.checked;
    }
});

解释说明：

• HTML部分:

  • #selectAll 是一个复选框，用于全选或取消全选。
  • .item 是每个单独的复选框，用户可以选择或取消选择。

• JavaScript部分:

  • 使用 addEventListener 监听 #selectAll 复选框的变化事件。
  • 当 #selectAll 被勾选或取消勾选时，遍历所有 .item 类的复选框，并将它们的状态设置为与 #selectAll 的状态一致。