jquery 多选

jQuery 多选实现方法

使用 prop() 方法

通过设置 prop('checked', true) 可以实现多选效果。适用于复选框（checkbox）或单选按钮（radio button）。

$('.checkbox-class').prop('checked', true);

使用 attr() 方法（旧版本兼容）

在 jQuery 1.6 之前，可以使用 attr() 方法设置选中状态。

$('.checkbox-class').attr('checked', 'checked');

多选下拉列表（Select2 插件）

对于下拉列表的多选，推荐使用 Select2 插件。

1. 引入 Select2 资源：

   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

2. 初始化多选下拉：

   $('#multi-select').select2({
    multiple: true
   });

动态多选实现

结合事件监听实现动态多选，例如点击按钮选中所有复选框：

$('#select-all').click(function() {
    $('.item-checkbox').prop('checked', true);
});

获取已选中的值

遍历已选中的复选框，获取其值：

var selectedValues = [];
$('.checkbox-class:checked').each(function() {
    selectedValues.push($(this).val());
});
console.log(selectedValues);

注意事项

• 使用 prop() 方法修改 checked 属性是推荐做法，因为 attr() 在某些情况下可能无法正确反映 DOM 属性。
• 对于大量元素的多选操作，建议结合事件委托提高性能。
• Select2 插件提供了搜索、标签化等增强功能，适合复杂多选场景。