带有子单选按钮的三个单选按钮需要使用jquery隐藏或显示div

时间:2015-11-13 08:19:21

标签: javascript jquery html

我正在研究jQuery hide或show function。如果用户选择第一个单选按钮并且用户选择儿童第一/第二单选按钮,我将有三个单选按钮和两个子单选按钮,如果用户选择第二个单选按钮/第三个单选按钮,将在第二个单独的按钮中显示一个div父和子单选按钮第二个div应该来。我没有得到如何做if条件

以下是fiddle link

这是我的HTML代码

<input type="radio" value="one" checked name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" />one A
<input type="radio" value="twoa" name="numbers" />two A
<br/>
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>

这是我当前的jquery代码

   $(".second,.third").hide();
$('input[type="radio"]').change(function () {
    if ($(this).val() === 'onea'  || 'twoa') {
        $(".first").show();
    }
});

第一个单选按钮按预期完美运行,但不适用于第二个第三个单选按钮

这就是我想要的

例如有两种情况1)默认情况下,一个单选按钮是,一个A单选按钮被检查,第一个div将显示2)如果用户选择两个单选按钮/三个单选按钮和子单A / 2 A第二个div将显示我没有得到第二个场景

提前致谢

1 个答案:

答案 0 :(得分:2)

试试这个.. jsfiddle

                    <input type="radio" value="one" name="number" />One
        <input type="radio" value="two" name="number" />two
        <input type="radio" value="three" name="number" />three
        <br/>
        <input type="radio" checked value="onea" name="numbers" id="first" />one A
        <input type="radio" value="twoa" name="numbers" id="second"/>two A
        <br/>
        <div class="first divcont">First</div>
        <div class="second divcont">second</div>
        <div class="third divcont">third</div>

        $(".second,.third").hide();
        $('input[type="radio"]').on("change",function () {
            var FVal = $('input[name="number"]:checked').val();
            console.log(FVal);
            if(FVal!='one'){
                $(".divcont").hide();
                $(".second").show();
            }else{
                 $(".divcont").hide();
                $(".first").show();

            }
        });