如何修复jQuery多组单选框的内容显示/隐藏功能异常

嘿，我来帮你搞定这两个问题！咱们一步步拆解解决：

第一个问题：默认选中的单选框不生效 #

你所有组的单选框都用了同一个name="notify_email"，浏览器会把它们当成同一组单选按钮——同一时间只能有一个单选框被选中，所以最后一个标记checked的按钮才会生效。解决方法很简单：给每组单选框设置唯一的name属性，比如notify_email_1、notify_email_2，这样每组都是独立的，默认选中的True按钮就能正常工作了。

第二个问题：点击事件无法控制显示/隐藏 #

原来的代码有两个核心问题：

1. 用closest('.notify-email-input')是向上查找父元素，但目标div是当前单选框的兄弟元素，方向完全错了；
2. 初始状态只判断了第一个False单选框，没有遍历所有组做初始化。

我给你调整了代码，还加了分组容器让逻辑更清晰：

修正后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 第一组 -->
<div class="notify-group">
  <input class="notify-email" type="radio" name="notify_email_1" value="true" checked />True
  <input class="notify-email notify-email-false" type="radio" name="notify_email_1" value="false" />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 1" placeholder="EMAIL" />
  </div>
</div>
<br /><br />
<!-- 第二组 -->
<div class="notify-group">
  <input class="notify-email" type="radio" name="notify_email_2" value="true" checked />True
  <input class="notify-email notify-email-false" type="radio" name="notify_email_2" value="false" />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 2" placeholder="EMAIL" />
  </div>
</div>
<br /><br />
<!-- 第三组 -->
<div class="notify-group">
  <input class="notify-email" type="radio" name="notify_email_3" value="true" checked />True
  <input class="notify-email notify-email-false" type="radio" name="notify_email_3" value="false" />False
  <div class="notify-email-input">
    Email: <br />
    <input type="email" name="blog_email" value="Email 3" placeholder="EMAIL" />
  </div>
</div>

修正后的JavaScript代码 #

// 页面加载时初始化所有组的显示状态
$('.notify-group').each(function() {
  const $currentGroup = $(this);
  // 判断当前组是否选中了True
  const isTrueChecked = $currentGroup.find('.notify-email[value="true"]').is(':checked');
  // 根据状态切换输入框的显示/隐藏
  $currentGroup.find('.notify-email-input').toggle(isTrueChecked);
});

// 绑定单选框点击事件
$('.notify-email').click(function() {
  // 找到当前单选框所在的组
  const $currentGroup = $(this).closest('.notify-group');
  const selectedValue = $(this).val();
  
  if (selectedValue === 'true') {
    $currentGroup.find('.notify-email-input').show('slow');
  } else {
    $currentGroup.find('.notify-email-input').hide('slow');
  }
});

关键修改点说明 #

• 新增.notify-group容器：把每组单选框和对应的输入框包起来，方便精准定位当前组的元素，不会干扰其他组；
• 唯一的name属性：每组的name不再重复，默认选中的True按钮可以正常生效；
• 初始化遍历所有组：页面加载时就根据选中状态设置输入框的显示/隐藏；
• 正确的元素定位：用closest('.notify-group')找到当前组，再操作组内的输入框，逻辑更清晰可靠；
• 用val()获取值：比attr("value")更可靠，能准确拿到单选框的当前选中值。

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