选择 div 标记时显示单选按钮

Question

ohk 所以这是我的第一个问题，我是javascript的菜鸟。 所以这是我的代码笔的链接-我的单选按钮

$('input[type="radio"]').click(function(){
if($(this).attr("value")=="a"){
$(".Box").hide('slow');
}
if($(this).attr("value")=="b"){
$(".Box").show('slow');

}        
});
$('input[type="radio"]').trigger('click');

$bg: #332f35;
$fg: lighten($bg,20%);
$borderWidth: 3px;
body {
background: $bg;
font-family: roboto;
}
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten($bg,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: $fg;
}
label + input[type=radio] + label {
border-left: solid $borderWidth $fg;
}
.radio-group {
border: solid $borderWidth $fg;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
}
@import url('https://fonts.googleapis.com/css?family=Roboto');

<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">
<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">
<label for="option-three">Three</label>
</div>
</form>
<div id='show-me' style='display:none'><p>Hello</p></div>

所以现在每当我单击一两个没有任何反应时，它都不会显示 hellodiv。 我尝试了所有可能的方法，但找不到修复方法。 谢谢你的帮助。

Answer 1

创建一个变量并为其赋值，然后应用 if 条件。 并将类框分配给div like

<form>
<div class="radio-group">
<input type="radio" id="option-one" name="selector" value="a">
<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">
<label for="option- three">Three</label>
</div>
</form>
<div id='show-me' class="box"  style='display:none'><p>Hello</p></div>

脚本

<script type="text/javascript">
jQuery(document).ready(function($) {
$('input[type="radio"]').click(function(){
var val = $(this).val();
if(val == "a"){
$(".Box").hide('slow');
}
if(val =="b"){
$(".Box").show('slow');
}    
});
});
</script>