当前位置：首页 > JavaScript

js 多选实现

2026-01-16 12:38:10JavaScript

实现多选的 JavaScript 方法

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

通过 HTML 的 checkbox 元素配合 JavaScript 实现多选功能。用户可以选择多个选项，提交时获取所有选中的值。

<form id="multiSelectForm">
  <input type="checkbox" name="option" value="1"> Option 1<br>
  <input type="checkbox" name="option" value="2"> Option 2<br>
  <input type="checkbox" name="option" value="3"> Option 3<br>
  <button type="button" onclick="getSelectedOptions()">Submit</button>
</form>

<script>
function getSelectedOptions() {
  const checkboxes = document.querySelectorAll('input[name="option"]:checked');
  const selectedValues = Array.from(checkboxes).map(checkbox => checkbox.value);
  console.log(selectedValues);
}
</script>

使用 `<select>` 元素的 `multiple` 属性

HTML 的 <select> 元素可以通过设置 multiple 属性允许用户多选。JavaScript 可以获取所有选中的选项。

<select id="multiSelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<button onclick="getSelectedOptions()">Submit</button>

<script>
function getSelectedOptions() {
  const selectElement = document.getElementById('multiSelect');
  const selectedOptions = Array.from(selectElement.selectedOptions).map(option => option.value);
  console.log(selectedOptions);
}
</script>

使用自定义 UI 组件实现多选

通过 JavaScript 和 CSS 创建自定义的多选组件，提供更好的交互体验。

<div class="custom-multi-select">
  <div class="selected-options" onclick="toggleOptions()">Select options...</div>
  <div class="options-container" id="optionsContainer">
    <div class="option" data-value="1">Option 1</div>
    <div class="option" data-value="2">Option 2</div>
    <div class="option" data-value="3">Option 3</div>
  </div>
</div>

<script>
function toggleOptions() {
  const container = document.getElementById('optionsContainer');
  container.style.display = container.style.display === 'none' ? 'block' : 'none';
}

document.querySelectorAll('.option').forEach(option => {
  option.addEventListener('click', function() {
    this.classList.toggle('selected');
    updateSelectedOptions();
  });
});

function updateSelectedOptions() {
  const selectedOptions = document.querySelectorAll('.option.selected');
  const selectedValues = Array.from(selectedOptions).map(option => option.getAttribute('data-value'));
  console.log(selectedValues);
}
</script>

使用第三方库实现多选

许多第三方库如 Select2、Choices.js 提供了丰富的多选功能，可以简化开发。

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

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

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

实现多选表格行

在表格中实现多选功能，通常用于批量操作。

<table id="multiSelectTable">
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>Row 2</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>Row 3</td>
  </tr>
</table>
<button onclick="getSelectedRows()">Submit</button>

<script>
function getSelectedRows() {
  const checkboxes = document.querySelectorAll('.row-checkbox:checked');
  const selectedRows = Array.from(checkboxes).map(checkbox => {
    return checkbox.closest('tr').querySelector('td:last-child').textContent;
  });
  console.log(selectedRows);
}
</script>

这些方法涵盖了从基础到高级的多选实现方式，可以根据具体需求选择合适的方法。

js 多选实现