如何修改脚本实现Radio按钮点击切换对应按钮显隐及选中状态？

我希望实现以下功能：点击label 1时显示Button 1，再次点击则隐藏Button 1并取消对应Radio按钮的选中状态；label 2和label 3遵循相同逻辑。当前我的代码如下：

原HTML代码 #

<input type='radio' class='radio-button' name='one'> <label>label 1</label>
<input type='radio' class='radio-button' name='two'> <label>label 2</label>
<input type='radio' class='radio-button' name='three'> <label>label 3</label>
<div class="show-one one box" style="display: none;"> <button>Button 1</button> </div>
<div class="show-two two box" style="display: none;"> <button>Button 2</button> </div>
<div class="show-three three box" style="display: none;"> <button>Button 3</button> </div>

原JS代码 #

var radio_button = false;
$('input[type="radio"]').click(function() {
  var inputValue = $(this).attr("name");
  var targetBox = $("." + inputValue);
  $(".box").not(targetBox).hide();
  $(targetBox).fadeIn();
  //alert('asd')
});
$('.radio-button').on("click", function(event) {
  var this_input = $(this);
  if (this_input.attr('checked1') == '1') {
    this_input.attr('checked1', '1')
  } else {
    this_input.attr('checked1', '2')
  }
  $('.radio-button').prop('checked', false);
  if (this_input.attr('checked1') == '1') {
    this_input.prop('checked', false);
    this_input.attr('checked1', '2');
  } else {
    this_input.prop('checked', true);
    this_input.attr('checked1', '1')
  }
});

问题分析与修改方案 #

原代码存在几个小问题：

1. 两个click事件绑定在同一批radio元素上，逻辑冲突且冗余
2. 自定义属性checked1的判断逻辑绕了弯路，不够直观
3. label没有和对应的radio关联（缺少for属性），虽然点击label能触发radio，但不符合规范
4. 每个radio的name不同，本来就不是互斥的单选组，违背了radio的原生逻辑

下面是优化后的代码，核心思路是：

• 给label添加for属性关联对应radio，提升可访问性
• 修正radio的name为同一值，确保它们是互斥的单选组
• 用jQuery的data()方法记录radio的上一次选中状态，逻辑更清晰
• 统一在一个click事件里处理所有显示/隐藏和选中状态切换逻辑

修改后的完整代码 #

HTML（优化label关联与radio组）

<input type='radio' class='radio-button' id='radio-one' name='radio-group'> <label for='radio-one'>label 1</label>
<input type='radio' class='radio-button' id='radio-two' name='radio-group'> <label for='radio-two'>label 2</label>
<input type='radio' class='radio-button' id='radio-three' name='radio-group'> <label for='radio-three'>label 3</label>
<div class="box one" style="display: none;"> <button>Button 1</button> </div>
<div class="box two" style="display: none;"> <button>Button 2</button> </div>
<div class="box three" style="display: none;"> <button>Button 3</button> </div>

JS代码

$('.radio-button').on('click', function() {
  const $radio = $(this);
  const wasCheckedBefore = $radio.data('prev-checked') === true;
  const targetClass = $radio.attr('id').replace('radio-', '');
  const $targetBox = $(`.${targetClass}`);

  // 先隐藏所有按钮盒子
  $('.box').hide();

  if (wasCheckedBefore) {
    // 如果之前是选中状态，现在取消选中并隐藏对应盒子
    $radio.prop('checked', false).data('prev-checked', false);
  } else {
    // 如果之前未选中，现在选中它并显示对应盒子
    $radio.prop('checked', true).data('prev-checked', true);
    $targetBox.fadeIn();
    // 重置其他radio的状态记录
    $('.radio-button').not($radio).data('prev-checked', false);
  }
});

代码解释 #

1. Radio组修正：把所有radio的name设为radio-group，确保它们是互斥的单选组，符合原生radio的逻辑
2. Label关联：每个label的for属性对应radio的id，点击label会精准触发对应radio的事件，同时提升页面可访问性
3. 状态记录：用data('prev-checked')记录radio上一次的选中状态，比自定义属性更符合jQuery的最佳实践
4. 逻辑简化：在同一个click事件里处理所有逻辑：
   • 点击已选中的radio：取消选中，隐藏对应按钮
   • 点击未选中的radio：选中它，显示对应按钮，同时隐藏其他按钮，并重置其他radio的状态记录

这样就能完美实现你想要的功能啦！

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