js实现单选多选

2026-04-07 14:52:28JavaScript

单选按钮的实现

在HTML中，单选按钮通过<input type="radio">实现，同一组单选按钮的name属性必须相同，确保互斥选择。通过checked属性标记默认选中项。

<form>
  <input type="radio" id="option1" name="group" value="1" checked>
  <label for="option1">选项1</label>
  <input type="radio" id="option2" name="group" value="2">
  <label for="option2">选项2</label>
</form>

通过JavaScript获取选中值：

const selectedValue = document.querySelector('input[name="group"]:checked').value;
console.log(selectedValue); // 输出选中的value

多选框的实现

多选框使用<input type="checkbox">，每个选项独立选中，name属性可相同或不同。通过遍历检查checked状态获取选中项。

js实现单选多选

<form>
  <input type="checkbox" id="item1" name="items" value="A">
  <label for="item1">选项A</label>
  <input type="checkbox" id="item2" name="items" value="B">
  <label for="item2">选项B</label>
</form>

JavaScript获取多选结果：

const checkboxes = document.querySelectorAll('input[name="items"]:checked');
const selectedValues = Array.from(checkboxes).map(cb => cb.value);
console.log(selectedValues); // 输出数组如["A", "B"]

动态控制选中状态

通过设置checked属性动态修改选中状态：

js实现单选多选

document.getElementById('option1').checked = true; // 单选按钮
document.getElementById('item1').checked = false; // 多选框

事件监听

为单选或多选框添加change事件监听：

document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', (e) => {
    if (e.target.checked) console.log('选中:', e.target.value);
  });
});

表单提交处理

在表单提交时统一处理选中值：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  console.log('单选值:', formData.get('group'));
  console.log('多选值:', formData.getAll('items'));
});