jQuery实现radio选中label样式 改checked类名后切换失效问题

问题根本原因 #

你遇到这个问题核心是两个容易踩的坑，原来用checked作为类名能跑本质是巧合，代码本身鲁棒性很差：

• 全局替换类名时破坏了原有逻辑
  如果你用编辑器全局替换所有checked字符串为active，会直接改坏两处关键逻辑：
  • 把单选框选中状态判断的$(this).is(":checked")替换成了$(this).is(":active")。:active是元素被鼠标按下瞬间的临时激活伪类，不是单选框的选中状态伪类，会导致判断逻辑完全不符合预期。
  • 替换时很容易漏写类选择器的.前缀，比如把$('label.checked')错写成$('label active')，这个选择器会查找label标签下名为active的后代元素，根本找不到之前带选中状态类的label，自然无法执行移除旧类的操作——每次点击只会给新的label加样式类，从来不会删除旧的，所有点过的label就会一直保持绿色选中样式。
• 初始HTML的类名没有同步修改
  初始代码里第一个默认选中的label硬编码写了class="container-radio checked"，如果替换类名时只改了CSS和JS里的类名，没改HTML标签上的初始类名，会导致第一次加载时状态类就不匹配，后续移除逻辑找不到对应元素直接失效。

正确修复方案 #

方案1：修正JS逻辑（保留jQuery实现）

不要全局暴力替换字符串，逐处修改类名，保证选择器、判断逻辑、初始类名完全对应：

<style>
/* 替换后的自定义状态类 */
.active {
    color: green;
}
</style>
<body>
<div class="input-area input-area-sp">
    <!-- 初始类名同步修改为active -->
    <label id="daily" class="container-radio active">
      <!-- 注意：这里的checked属性是原生属性，不要修改 -->
      <input type="radio" checked="checked" name="radio" class="radio">
      <span class="checkmark"></span>
      <em>Daily</em>
    </label><br/>
    
    <label id="weekly" class="container-radio">
      <input type="radio" name="radio"  class="radio">
      <span class="checkmark"></span>
      <em>Weekly</em>
    </label>
</div>

<script>
$(document).on("click", 'input.radio', function () {
    // 注意：这里的:checked是原生选中伪类，和自定义类名无关，绝对不能改
    if ($(this).is(":checked")) {
        // 类选择器不要漏写.前缀，保证和自定义类名一致
        $('label.active').removeClass('active');
        $(this).parent().addClass("active");
    }
});
</script>
</body>

方案2：纯CSS实现（更推荐，无JS依赖）

利用CSS原生的:checked伪类和兄弟选择器，完全不需要写JS切换类，性能更好也不会出类名替换的bug：

/* 隐藏原生单选框 */
input.radio {
    display: none;
}
/* 选中状态下文字变绿色 */
input.radio:checked ~ em {
    color: green;
}
/* 自定义单选按钮选中样式可直接追加，不需要JS控制 */
input.radio:checked ~ .checkmark {
    background-color: green;
    border-color: green;
}

HTML部分不需要加任何初始状态类，也不需要写脚本，浏览器会原生维护单选框的选中互斥逻辑。

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