jquery 多选

jQuery 多选实现方法

jQuery 提供了多种方式实现多选功能，包括复选框操作、下拉多选框以及自定义 UI 组件。以下是几种常见实现方式：

复选框多选

通过 jQuery 选择器获取所有选中的复选框值：

var selectedValues = [];
$('input[type="checkbox"]:checked').each(function() {
    selectedValues.push($(this).val());
});

Select2 多选下拉框

使用 Select2 插件增强原生 <select multiple>：

<select id="multiSelect" multiple>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>

<script>
$('#multiSelect').select2();
</script>

jQuery UI 多选组件

通过 jQuery UI 实现可交互的多选列表：

<div id="multiSelect">
    <div class="option" data-value="1">选项1</div>
    <div class="option" data-value="2">选项2</div>
</div>

<script>
$('#multiSelect .option').click(function() {
    $(this).toggleClass('selected');
});
</script>

获取多选值

对于表单提交，可通过序列化方式获取多选值：

$('form').submit(function() {
    var formData = $(this).serialize();
    // 处理包含多选值的formData
});

注意事项

• 复选框需设置相同的 name 属性才能作为数组提交
• 使用插件时注意初始化配置选项
• 移动端需考虑触摸交互体验

以上方法可根据具体需求选择使用原生 jQuery 或配合插件实现。对于复杂场景，推荐使用 Select2 或 jQuery UI 等成熟解决方案。