js 实现多选按钮

2026-03-15 21:25:48JavaScript

实现多选按钮的 HTML 结构

使用 <input type="checkbox"> 创建多选按钮，每个选项对应一个独立的复选框。通过 name 属性分组，value 属性标识选项值。

<div class="checkbox-group">
  <label><input type="checkbox" name="option" value="1"> Option 1</label>
  <label><input type="checkbox" name="option" value="2"> Option 2</label>
  <label><input type="checkbox" name="option" value="3"> Option 3</label>
</div>

获取已选中的值

通过 querySelectorAll 选中所有被勾选的复选框，遍历获取其 value。

function getSelectedValues() {
  const checkboxes = document.querySelectorAll('input[name="option"]:checked');
  const values = Array.from(checkboxes).map(checkbox => checkbox.value);
  console.log(values); // 输出如 ["1", "3"]
}

全选/取消全选功能

添加一个控制全选的复选框，通过事件监听批量设置其他复选框状态。

<label><input type="checkbox" id="selectAll"> Select All</label>

document.getElementById('selectAll').addEventListener('change', function(e) {
  const checkboxes = document.querySelectorAll('input[name="option"]');
  checkboxes.forEach(checkbox => checkbox.checked = e.target.checked);
});

动态添加选项

通过 DOM 操作动态新增复选框选项。

function addOption(value, text) {
  const container = document.querySelector('.checkbox-group');
  const label = document.createElement('label');
  label.innerHTML = `<input type="checkbox" name="option" value="${value}"> ${text}`;
  container.appendChild(label);
}

事件监听

为复选框组绑定 change 事件，实时响应选择变化。

document.querySelectorAll('input[name="option"]').forEach(checkbox => {
  checkbox.addEventListener('change', getSelectedValues);
});

样式增强

使用 CSS 美化复选框，例如隐藏原生样式并自定义外观。

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label:before {
  content: "☐";
  margin-right: 5px;
}
input[type="checkbox"]:checked + label:before {
  content: "☑";
}

表单提交处理

在表单提交时收集所有选中值，可通过隐藏域或直接序列化。

js 实现多选按钮

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);
  const selected = formData.getAll('option'); // 获取所有同名复选框的值
  console.log(selected);
});