单选按钮选中时控制Div显示/隐藏失效问题求助（JS新手）

嘿，作为JavaScript新手遇到这种小问题太正常啦，我帮你梳理下代码里的关键问题：

核心错误：选择器匹配失败 #

你在JS代码里用了$("Box")来选中目标Div，但你的Div的id是show-me，jQuery的id选择器必须加#前缀，正确的选择器应该是$("#show-me")——这就是点击按钮没反应的根本原因！

其他可优化的细节 #

• 第三个单选按钮没有设置value属性，点击它时当前代码不会执行任何操作，建议补充value（比如设为"c"）并添加对应逻辑；
• 初始状态没有单选按钮默认选中，触发click事件时可能导致页面初始状态不符合预期，可以给第一个按钮加上checked属性。

修正后的完整JS代码 #

$('input[type="radio"]').click(function(){
  const targetBox = $("#show-me");
  switch($(this).val()){
    case "a":
      targetBox.hide('slow');
      break;
    case "b":
      targetBox.show('slow');
      break;
    case "c":
      // 可自定义第三个按钮的逻辑，比如保持隐藏或切换状态
      targetBox.hide('slow');
      break;
  }
});
// 初始化时触发默认选中按钮的点击事件
$('input[type="radio"]:checked').trigger('click');

补充HTML调整（可选） #

给第三个单选按钮加value，并给第一个按钮设置默认选中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
 <div class="radio-group">
 <input type="radio" id="option-one" name="selector" value="a" checked>
 <label for="option-one">One</label>
 <input type="radio" id="option-two" name="selector" value="b">
 <label for="option-two">Two</label>
 <input type="radio" id="option-three" name="selector" value="c">
 <label for="option-three">Three</label>
 </div>
</form>
<div id='show-me' style='display:none'><p>Hello</p></div>

这样调整后，点击"One"会隐藏show-me，点击"Two"会显示它，点击"Three"也能执行你定义的逻辑啦～

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