js 多选 实现
实现多选功能的方法
在 JavaScript 中实现多选功能通常涉及以下关键步骤：
HTML 结构
使用 <input type="checkbox"> 元素创建多选框，或使用 <select multiple> 实现多选下拉列表。示例：
<!-- 复选框方案 -->
<div class="checkbox-group">
<input type="checkbox" id="option1" value="1">
<label for="option1">选项1</label>
<input type="checkbox" id="option2" value="2">
<label for="option2">选项2</label>
</div>
<!-- 多选下拉框方案 -->
<select multiple id="multiSelect">
<option value="1">选项1</option>
<option value="2">选项2</option>
</select>JavaScript 交互逻辑 通过事件监听获取用户选择的值：
// 复选框方案
const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', () => {
const selectedValues = Array.from(checkboxes)
.filter(c => c.checked)
.map(c => c.value);
console.log('已选择:', selectedValues);
});
});
// 多选下拉框方案
const select = document.getElementById('multiSelect');
select.addEventListener('change', () => {
const selectedOptions = Array.from(select.selectedOptions).map(opt => opt.value);
console.log('已选择:', selectedOptions);
});高级实现技巧
全选/反选功能 添加控制按钮并实现批量操作：
document.getElementById('selectAll').addEventListener('click', () => {
checkboxes.forEach(checkbox => checkbox.checked = true);
});
document.getElementById('deselectAll').addEventListener('click', () => {
checkboxes.forEach(checkbox => checkbox.checked = false);
});数据绑定 与前端框架结合（如 Vue/React）实现响应式数据绑定：
// Vue 示例
new Vue({
data() {
return {
options: [{id:1, text:'选项1'}, {id:2, text:'选项2'}],
selected: []
}
}
})注意事项
- 移动端适配需考虑触摸交互体验
- 大量选项时建议添加搜索过滤功能
- 选中状态建议同时通过 CSS 提供视觉反馈
- 表单提交时需处理多选数据的序列化格式
以上方案可根据具体需求组合使用，复选框方案适合选项较少的情况，多选下拉框更适合紧凑布局下的多选项选择。
