Question

哦，所以这是我的第一个问题，我是javascript中的菜鸟。所以这是我的codepen的链接 - my radio buttons

 $('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>

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

Answer 1

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

<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>

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

1 个答案: