当前位置：首页 > JavaScript

js多选实现

2026-04-06 02:02:13JavaScript

实现多选的常见方法

在JavaScript中实现多选功能可以通过多种方式完成，以下是几种常见的实现方案：

使用HTML的`<select>`标签与`multiple`属性

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

通过设置multiple属性，用户可以使用Ctrl或Shift键进行多选。

js多选实现

使用复选框（Checkbox）实现多选

<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>
  <input type="checkbox" id="option3" value="3">
  <label for="option3">选项3</label>
</div>

通过监听change事件获取选中的值：

js多选实现

const checkboxes = document.querySelectorAll('.checkbox-group input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const selectedValues = Array.from(checkboxes)
      .filter(c => c.checked)
      .map(c => c.value);
    console.log(selectedValues);
  });
});

使用第三方库（如jQuery UI或Select2）

对于更复杂的多选需求，可以使用现成的库：

// 使用jQuery UI的多选组件
$("#multiSelect").selectmenu({
  multiple: true
});

// 使用Select2
$("#multiSelect").select2({
  multiple: true
});

自定义多选组件

如果需要完全自定义UI，可以通过动态生成的DOM元素和事件处理实现：

const items = ['选项1', '选项2', '选项3'];
const container = document.getElementById('customMultiSelect');

items.forEach(item => {
  const div = document.createElement('div');
  div.className = 'custom-option';
  div.textContent = item;
  div.addEventListener('click', function() {
    this.classList.toggle('selected');
    updateSelectedItems();
  });
  container.appendChild(div);
});

function updateSelectedItems() {
  const selected = document.querySelectorAll('.custom-option.selected');
  const selectedValues = Array.from(selected).map(el => el.textContent);
  console.log(selectedValues);
}