当前位置：首页 > JavaScript

js实现多选

2026-04-05 08:05:39JavaScript

实现多选功能的方法

使用HTML和JavaScript实现多选功能，可以通过复选框（checkbox）或选择框（select multiple）结合事件监听完成。

HTML部分

js实现多选

<!-- 复选框方式 -->
<div id="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>

<!-- 下拉多选方式 -->
<select id="multi-select" multiple>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

获取选中值的方法

复选框方式

js实现多选

const checkboxes = document.querySelectorAll('#checkbox-group input[type="checkbox"]');
const selectedValues = [];

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if(this.checked) {
      selectedValues.push(this.value);
    } else {
      const index = selectedValues.indexOf(this.value);
      if(index > -1) {
        selectedValues.splice(index, 1);
      }
    }
    console.log('当前选中值:', selectedValues);
  });
});

下拉多选方式

const multiSelect = document.getElementById('multi-select');
multiSelect.addEventListener('change', function() {
  const selectedOptions = [...this.selectedOptions].map(option => option.value);
  console.log('当前选中值:', selectedOptions);
});

全选/反选功能实现

function toggleAll(selectAll) {
  const checkboxes = document.querySelectorAll('#checkbox-group input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = selectAll;
  });

  // 更新选中值数组
  selectedValues.length = 0;
  if(selectAll) {
    checkboxes.forEach(checkbox => {
      selectedValues.push(checkbox.value);
    });
  }
  console.log('当前选中值:', selectedValues);
}