当前位置：首页 > JavaScript

实现全选js

2026-04-05 12:50:45JavaScript

实现全选功能的 JavaScript 方法

方法一：使用 querySelectorAll 和循环

通过 querySelectorAll 获取所有需要选中的元素，遍历并设置 checked 属性。

function selectAll() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
}

方法二：通过父容器控制子元素

若所有复选框在一个父容器内，可以直接操作父容器的 checked 属性。

实现全选js

function toggleAll(source) {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = source.checked;
  });
}

方法三：使用事件委托

通过事件委托监听父元素的点击事件，动态控制子元素的选中状态。

document.getElementById('parent').addEventListener('click', function(e) {
  if (e.target.classList.contains('select-all')) {
    const checkboxes = this.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
      checkbox.checked = e.target.checked;
    });
  }
});

方法四：结合表单提交

实现全选js

适用于表单中的全选功能，直接操作表单内的复选框。

function selectAllInForm(formId) {
  const form = document.getElementById(formId);
  const checkboxes = form.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
}

注意事项

确保复选框的 name 或 class 属性一致以便正确选择。
若页面动态加载内容，需重新绑定事件或使用事件委托。
全选按钮的 id 或 class 需与事件监听器匹配。

示例 HTML 结构

<input type="checkbox" id="selectAll" onclick="toggleAll(this)">
<div id="checkbox-container">
  <input type="checkbox" name="item">
  <input type="checkbox" name="item">
</div>