当前位置：首页 > JavaScript

js实现表单全选

2026-03-16 06:44:41JavaScript

实现表单全选功能

表单全选功能通常用于批量操作，例如批量删除或批量提交。以下是使用JavaScript实现表单全选的方法。

方法一：使用复选框控制全选

创建一个全选复选框，通过监听其状态变化来控制其他复选框的选中状态。

<input type="checkbox" id="selectAll">全选
<div id="checkboxGroup">
  <input type="checkbox" name="item" value="1">选项1
  <input type="checkbox" name="item" value="2">选项2
  <input type="checkbox" name="item" value="3">选项3
</div>

document.getElementById('selectAll').addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

方法二：动态生成全选逻辑

如果复选框是动态生成的，可以通过事件委托的方式实现全选功能。

<div id="container">
  <input type="checkbox" id="selectAll">全选
  <div id="checkboxGroup"></div>
</div>

document.getElementById('selectAll').addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

// 动态添加复选框
const checkboxGroup = document.getElementById('checkboxGroup');
for (let i = 1; i <= 3; i++) {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.name = 'item';
  checkbox.value = i;
  checkboxGroup.appendChild(checkbox);
  checkboxGroup.appendChild(document.createTextNode('选项' + i));
}

方法三：反向控制全选复选框

当手动勾选所有复选框时，自动勾选全选复选框；反之取消全选。

const checkboxes = document.querySelectorAll('#checkboxGroup input[type="checkbox"]');
const selectAll = document.getElementById('selectAll');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
    selectAll.checked = allChecked;
  });
});

方法四：使用jQuery实现

如果项目中使用了jQuery，可以通过以下方式简化代码。

js实现表单全选

$('#selectAll').change(function() {
  $('input[name="item"]').prop('checked', $(this).prop('checked'));
});

$('input[name="item"]').change(function() {
  const allChecked = $('input[name="item"]').length === $('input[name="item"]:checked').length;
  $('#selectAll').prop('checked', allChecked);
});