JavaScript实现功能比较全面的全选和多选

在前端开发中，常常需要实现列表或表格的选择功能。其中，全选和多选是比较常见的需求。本文将介绍如何使用JavaScript实现比较全面的全选和多选功能，并提供示例代码。

实现全选功能

全选功能即当用户勾选“全选”复选框时，自动勾选所有子复选框。以下是一个简单的示例：

<input type="checkbox" id="checkAll"> 全选<br>
<input type="checkbox" name="subCheckbox"> 选项1<br>
<input type="checkbox" name="subCheckbox"> 选项2<br>
<input type="checkbox" name="subCheckbox"> 选项3<br>

对应的JavaScript代码如下：

let checkAll = document.getElementById('checkAll');
let subCheckboxes = document.getElementsByName('subCheckbox');

checkAll.addEventListener('click', function() {
  for (let i = 0; i < subCheckboxes.length; i++) {
    subCheckboxes[i].checked = this.checked;
  }
});

上述代码中，我们首先分别获取“全选”复选框和所有子复选框。然后，我们给“全选”复选框添加了一个点击事件监听器，当点击时，遍历所有子复选框，并根据“全选”复选框的状态设置子复选框的选中状态。

实现多选功能

多选功能即当用户勾选至少一个子复选框时，“全选”复选框也自动被勾选。以下是一个简单的示例：

<input type="checkbox" id="checkAll"> 全选<br>
<input type="checkbox" name="subCheckbox"> 选项1<br>
<input type="checkbox" name="subCheckbox"> 选项2<br>
<input type="checkbox" name="subCheckbox"> 选项3<br>

对应的JavaScript代码如下：

-- -------------------- ---- -------
--- -------- - ------------------------------------
--- ------------- - ------------------------------------------

--- ---- - - -- - - --------------------- ---- -
  ------------------------------------------ ---------- -
    --- ------------ - ----------------------------------------------------------------------
    ---------------- - ------------- --- ----------------------
  ---
-

上述代码中，我们首先分别获取“全选”复选框和所有子复选框。然后，我们遍历所有子复选框，并给它们添加点击事件监听器。在每次子复选框被点击时，我们使用 querySelectorAll 方法获取所有已经选中的子复选框数量。如果已经选中的子复选框数量等于所有子复选框的数量，则表示所有子复选框都已被选中，此时将“全选”复选框设为选中状态。

总结

本文介绍了如何使用JavaScript实现全选和多选功能，并提供了相应的示例代码。在实际开发中，我们可以根据具体的业务需求对代码进行改进和优化，以达到更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1413