js实现多选
实现多选的 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);
}
});注意事项
- 移动端适配可能需要额外样式处理，如增大点击区域。
- 表单提交时需阻止默认行为（
event.preventDefault()）以避免页面刷新。 - 若使用框架（如 React/Vue），建议使用框架提供的状态管理方式。
