如何在HTML中不给单选按钮设置相同name的前提下实现仅单个可选效果

实现方案 #

方案1：原生JavaScript实现（无依赖，不影响原有POST逻辑） #

给两个单选按钮添加相同的类名，比如punch-type-radio，直接添加如下JS代码即可：

const punchRadios = document.querySelectorAll('.punch-type-radio');
punchRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      punchRadios.forEach(otherRadio => {
        if (otherRadio !== radio) otherRadio.checked = false;
      });
    }
  });
});

这个方案完全不需要修改单选框的name属性，原有表单提交的POST参数不会有任何变化。

方案2：jQuery实现（适合已引入jQuery的项目） #

代码更简洁：

$('.punch-type-radio').change(function() {
  if ($(this).is(':checked')) {
    $('.punch-type-radio').not(this).prop('checked', false);
  }
});

方案3：低改造成本的优化方案 #

如果可以微调后端逻辑，更推荐直接给两个单选框设置相同name，分别赋值on_duty和off_duty的value，后端直接读取该name对应的value判断打卡类型即可，既可以用原生单选框的互斥效果，也不需要额外写JS代码，后续维护成本更低。

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