如何用Checkbox模拟Radio输入框：实现仅选中一个输入框功能

要实现用Checkbox替代Radio输入框的单选效果，让同组内仅能选中一个Checkbox，可按以下方式修改代码：

HTML 代码 #

<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">
<input type="checkbox" name="subcategory">

JavaScript 代码 #

const inputs = document.querySelectorAll('input[name="subcategory"]');

inputs.forEach((item) => {
  item.addEventListener('click', () => {
    // 遍历同组所有Checkbox，将当前点击项之外的全部设为未选中
    inputs.forEach(otherItem => {
      if (otherItem !== item) {
        otherItem.checked = false;
      }
    });
    // 确保当前点击项处于选中状态（若需支持点击已选中项取消选中，可删除此行）
    item.checked = true;
  });
});

逻辑说明 #

• 通过document.querySelectorAll选中所有同name的Checkbox，以此划分单选分组。
• 给每个Checkbox绑定点击事件：
  1. 遍历同组内的其他Checkbox，将它们的选中状态设为false，实现单选互斥效果。
  2. 强制当前点击的Checkbox处于选中状态（如果需要支持点击已选中项取消选中，移除item.checked = true;即可）。

内容的提问来源于stack exchange，提问作者markelov