Radio按钮样式化为按钮后的交互功能异常问题

我来帮你搞定这两个问题，让你的按钮式单选框完全符合原生单选的交互逻辑：

问题1：页面加载时所有按钮都带active类 #

这是因为你的初始化代码把active类给了所有按钮容器，正确的做法是只给默认选中的单选按钮对应的容器加active类。

假设你的HTML结构是每个单选按钮包裹在.btn容器里，比如：

<div class="btn-group">
  <label class="btn">
    <input type="radio" name="myRadio" checked> 选项A
  </label>
  <label class="btn">
    <input type="radio" name="myRadio"> 选项B
  </label>
</div>

那初始化代码应该改成这样：

$(document).ready(function() {
  // 找到默认选中的单选框，给它的父按钮加active类
  $('input[type="radio"]:checked').closest('.btn').addClass('active');
});

这样页面加载后，只有默认选中的那个按钮会有active样式，其他的不会。

问题2：fadeToggle像复选框，不符合单选互斥特性 #

单选按钮的核心是互斥选择，所以不能用toggle逻辑（点同一个按钮切换显示/隐藏），而是要做到：选中某个按钮时，显示它对应的输入框，同时隐藏其他所有单选按钮对应的输入框。

假设每个单选框对应一个额外输入框，比如：

<!-- 单选按钮组 -->
<div class="btn-group">
  <label class="btn">
    <input type="radio" name="myRadio" value="A" checked> 选项A
  </label>
  <label class="btn">
    <input type="radio" name="myRadio" value="B"> 选项B
  </label>
</div>

<!-- 额外输入框 -->
<div class="extra-box" id="boxA">选项A的额外输入：<input type="text"></div>
<div class="extra-box" id="boxB" style="display: none;">选项B的额外输入：<input type="text"></div>

对应的JS逻辑应该改成这样：

$('input[type="radio"]').on('change', function() {
  // 第一步：隐藏所有额外输入框
  $('.extra-box').hide();
  
  // 第二步：显示当前选中按钮对应的输入框
  const targetBox = '#box' + $(this).val();
  $(targetBox).fadeIn();
  
  // （如果没用Bootstrap的data-toggle，手动维护active类）
  $('.btn').removeClass('active');
  $(this).closest('.btn').addClass('active');
});

这样点击任意单选按钮，都会先把所有额外框藏起来，再显示当前对应的那个，完全符合单选互斥的特性，不会出现点同一个按钮切换状态的情况。

如果你的项目用了Bootstrap的data-toggle="buttons"组件，其实它会自动管理active类，这时候你只需要处理额外输入框的显示隐藏逻辑就行，不用手动维护active类，避免冲突。

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