js 实现多选按钮

2026-04-07 14:49:19JavaScript

实现多选按钮的方法

使用 HTML 和 JavaScript 创建多选按钮

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>

<input type="checkbox" id="option3" value="Option 3">
<label for="option3">Option 3</label>

<button onclick="getSelectedOptions()">Get Selected Options</button>

function getSelectedOptions() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  const selectedOptions = [];

  checkboxes.forEach(checkbox => {
    if (checkbox.checked) {
      selectedOptions.push(checkbox.value);
    }
  });

  console.log("Selected options:", selectedOptions);
}

使用事件监听器动态响应选择

通过事件监听器可以实时响应多选按钮的变化。

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

全选和取消全选功能

添加一个“全选”按钮来控制所有多选按钮的状态。

<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;
  });
});

使用数组存储选中项

通过数组存储选中项，便于后续处理。

const selectedOptions = [];

document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const index = selectedOptions.indexOf(this.value);
    if (this.checked && index === -1) {
      selectedOptions.push(this.value);
    } else if (!this.checked && index !== -1) {
      selectedOptions.splice(index, 1);
    }
    console.log("Current selection:", selectedOptions);
  });
});

使用 jQuery 简化代码

如果项目中使用了 jQuery，可以通过更简洁的代码实现多选功能。

<input type="checkbox" class="option" value="Option 1">
<label>Option 1</label>

<input type="checkbox" class="option" value="Option 2">
<label>Option 2</label>

<input type="checkbox" class="option" value="Option 3">
<label>Option 3</label>

<button id="getSelected">Get Selected Options</button>

$('#getSelected').click(function() {
  const selectedOptions = $('.option:checked').map(function() {
    return $(this).val();
  }).get();
  console.log("Selected options:", selectedOptions);
});

动态生成多选按钮

通过 JavaScript 动态生成多选按钮。

const options = ["Option 1", "Option 2", "Option 3"];
const container = document.getElementById('checkboxContainer');

options.forEach((option, index) => {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = `option${index + 1}`;
  checkbox.value = option;

  const label = document.createElement('label');
  label.htmlFor = `option${index + 1}`;
  label.textContent = option;

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

表单提交时获取选中项

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

js 实现多选按钮

<form id="myForm">
  <input type="checkbox" name="options" value="Option 1">
  <label>Option 1</label>

  <input type="checkbox" name="options" value="Option 2">
  <label>Option 2</label>

  <input type="checkbox" name="options" value="Option 3">
  <label>Option 3</label>

  <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const selectedOptions = formData.getAll('options');
  console.log("Submitted options:", selectedOptions);
});

以上方法可以根据具体需求选择使用，灵活实现多选按钮功能。