当前位置：首页 > JavaScript

js 实现多选

2026-01-31 15:06:21JavaScript

实现多选的 JavaScript 方法

使用 HTML 的 `multiple` 属性

通过 <select> 标签的 multiple 属性可以实现多选功能。用户按住 Ctrl 或 Command 键点击选项即可多选。

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

使用复选框（Checkbox）

通过一组复选框实现多选，用户可以自由选择多个选项。

<input type="checkbox" name="option" value="1"> 选项1
<input type="checkbox" name="option" value="2"> 选项2
<input type="checkbox" name="option" value="3"> 选项3

获取选中的值

通过 JavaScript 获取用户选中的值。

对于 <select multiple>：

js 实现多选

const selectElement = document.querySelector('select[multiple]');
const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);
console.log(selectedValues);

对于复选框：

const checkboxes = document.querySelectorAll('input[name="option"]:checked');
const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
console.log(selectedValues);

动态添加多选功能

可以通过 JavaScript 动态创建多选元素并绑定事件。

js 实现多选

const container = document.getElementById('checkbox-container');
const options = ['选项1', '选项2', '选项3'];

options.forEach(option => {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.name = 'dynamic-option';
  checkbox.value = option;

  const label = document.createElement('label');
  label.textContent = option;

  container.appendChild(checkbox);
  container.appendChild(label);
  container.appendChild(document.createElement('br'));
});

使用第三方库

可以使用第三方库如 Select2 或 Choices.js 实现更丰富的多选功能。

Select2 示例：

<select class="js-example-basic-multiple" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<script>
$(document).ready(function() {
  $('.js-example-basic-multiple').select2();
});
</script>

事件监听

为多选元素添加事件监听，实时获取用户选择。

document.querySelector('select[multiple]').addEventListener('change', function() {
  const selected = Array.from(this.selectedOptions).map(option => option.value);
  console.log('当前选中:', selected);
});

通过这些方法可以灵活实现多选功能，适用于表单、配置选项等场景。