js 实现多选

实现多选框的基本方法

使用HTML的<input type="checkbox">元素创建多选框，通过JavaScript监听事件并处理选中状态。

<input type="checkbox" id="option1" value="Option 1">
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" value="Option 2">
<label for="option2">Option 2</label>

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      console.log(this.value + ' is selected');
    }
  });
});

获取所有选中项的值

通过遍历所有多选框，筛选出被选中的项并收集它们的值。

function getSelectedValues() {
  const selected = [];
  document.querySelectorAll('input[type="checkbox"]:checked').forEach(checkbox => {
    selected.push(checkbox.value);
  });
  return selected;
}

全选与反选功能

添加一个“全选”复选框来控制其他多选框的状态。

<input type="checkbox" id="selectAll">
<label for="selectAll">Select All</label>

document.getElementById('selectAll').addEventListener('change', function() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]:not(#selectAll)');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

使用事件委托优化性能

对于大量多选框，使用事件委托减少事件监听器的数量。

document.addEventListener('change', function(event) {
  if (event.target.matches('input[type="checkbox"]')) {
    console.log(event.target.value + ' state changed');
  }
});

与框架结合使用

在Vue中实现多选功能。

new Vue({
  el: '#app',
  data: {
    options: [
      { id: 1, value: 'Option 1', checked: false },
      { id: 2, value: 'Option 2', checked: false }
    ]
  },
  computed: {
    selectedOptions() {
      return this.options.filter(option => option.checked);
    }
  }
});

样式自定义

使用CSS自定义多选框的外观。

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
}

input[type="checkbox"]:checked {
  background-color: #2196F3;
  border-color: #2196F3;
}

表单提交处理

在表单提交时获取所有选中的值。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  const selected = getSelectedValues();
  console.log('Selected items:', selected);
});