Chrome中Radio Button伪装成Checkbox时indeterminate状态异常问题

这个问题我之前也踩过坑！Chrome对通过CSS修改外观的radio按钮确实会有一些奇怪的状态判定，尤其是indeterminate这个本来属于checkbox的状态，在这种自定义场景下会被误触发，而且还会出现时好时坏的情况，咱们来一步步解决：

问题根源 #

你通过CSS把radio的外观改成了checkbox，但Chrome的渲染引擎在处理这种非原生样式的表单控件时，会错误地给未选中的radio设置indeterminate状态，尤其是在页面初始化和刷新时，这个状态的触发没有固定规律，和浏览器的渲染时机有关。

解决方案 #

我们需要强制重置indeterminate状态，同时优化JS逻辑，避免和浏览器的原生控件状态处理冲突：

修改后的完整代码 #

JavaScript

$(document).ready(function() {
  // 初始化第一个radio为选中状态
  const firstRadio = $("input[type=radio]:eq(0)");
  const secondRadio = $("input[type=radio]:eq(1)");
  
  firstRadio.prop("checked", true);
  secondRadio.prop("checked", false);
  // 关键：强制关闭第二个radio的indeterminate状态
  secondRadio.prop("indeterminate", false);
  secondRadio.addClass("opt-in-radio");

  $('form').on('click', ':radio', function() {
    const $this = $(this);
    // 如果点击的是已经选中的radio，取消选中
    if ($this.prop("checked")) {
      $this.prop("checked", false);
      // 如果是第二个radio，同步取消第一个的选中状态
      if ($this.hasClass("opt-in-radio")) {
        firstRadio.prop("checked", false);
      }
    } else {
      // 如果点击的是未选中的radio，选中它，并取消另一个的选中状态
      $this.prop("checked", true);
      if ($this.hasClass("opt-in-radio")) {
        firstRadio.prop("checked", false);
      } else {
        secondRadio.prop("checked", false);
      }
    }
  });
});

CSS

input[type="radio"] {
  /* 加上标准属性，覆盖所有浏览器 */
  appearance: checkbox;
  -moz-appearance: checkbox;
  -webkit-appearance: checkbox;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" name="option" value="1"> 选项1
  <input type="radio" name="option" value="2"> 选项2
</form>

关键修改点说明 #

1. 强制重置indeterminate状态：在初始化时直接给第二个radio设置prop("indeterminate", false)，这能从根源上阻止Chrome给它设置不确定状态，不管浏览器的渲染时机如何，都能确保状态正确。
2. 简化逻辑避免冲突：原来的data-ischecked逻辑容易和浏览器原生的checked状态产生冲突，现在直接基于checked属性来处理点击事件，逻辑更清晰，也不会干扰浏览器的控件状态管理。
3. 完善CSS前缀：加上标准的appearance属性，确保在更多浏览器中都能正确显示checkbox样式。

这样修改后，刷新页面时第二个radio的状态就会稳定保持为false，不会再出现indeterminate的情况，同时也保留了你想要的“外观像checkbox，但仅能提交一个值”的特性。

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