当前位置：首页 > JavaScript

js实现多选

2026-03-02 07:02:00JavaScript

实现多选的 JavaScript 方法

HTML 结构示例 创建一个包含多选框的表单，确保每个复选框有相同的 name 属性以实现分组：

<form id="multiSelectForm">
  <input type="checkbox" name="options" value="option1"> Option 1<br>
  <input type="checkbox" name="options" value="option2"> Option 2<br>
  <input type="checkbox" name="options" value="option3"> Option 3<br>
  <button type="button" onclick="getSelectedOptions()">提交</button>
</form>

获取选中值的方法 通过 querySelectorAll 筛选被选中的复选框，并提取其值：

function getSelectedOptions() {
  const checkboxes = document.querySelectorAll('input[name="options"]:checked');
  const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
  console.log(selectedValues); // 输出如 ["option1", "option3"]
}

全选/反选功能 添加一个控制所有复选框的按钮：

<button type="button" onclick="toggleAll()">全选/反选</button>

对应的 JavaScript 代码：

function toggleAll() {
  const checkboxes = document.querySelectorAll('input[name="options"]');
  const isAnyUnchecked = Array.from(checkboxes).some(checkbox => !checkbox.checked);
  checkboxes.forEach(checkbox => {
    checkbox.checked = isAnyUnchecked;
  });
}

事件监听优化 使用事件委托监听复选框变化，避免为每个复选框单独绑定事件：

document.getElementById('multiSelectForm').addEventListener('change', function(event) {
  if (event.target.type === 'checkbox') {
    console.log('选项状态变化:', event.target.value, event.target.checked);
  }
});

注意事项

js实现多选