Jquery隐藏/显示单选按钮选择

时间:2015-05-16 17:25:54

标签: jquery html5

刚开始玩JQuery并且有一个让我疯狂的问题。我确信它的东西是完全明显和简单的但是我无法通过跟踪已经解决的类似问题解决它...

我只是试图隐藏/显示基于选择单选按钮值的部分..

我的Html:

<div class="Packages">
              <div class="row">
                    <div class="col-sm-10 col-md-3">
                        <div class="thumbnail">
                            <div class="caption">
                                <h3><input id="Studio_PackageId" name="Studio.PackageId" type="radio" value="1" /> Option 1</h3>
                                <hr />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-10 col-md-3">
                        <div class="thumbnail">
                            <div class="caption">
                                <h3><input id="Studio_PackageId" name="Studio.PackageId" type="radio" value="2" /> Option 2</h3>
                                <hr />
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-10 col-md-3">
                        <div class="thumbnail">
                            <div class="caption">
                                <h3><input id="Studio_PackageId" name="Studio.PackageId" type="radio" value="3" /> Option 3</h3>
                                <hr />
                            </div>
                        </div>
                    </div>
            </div>

    </div>

我的剧本:

<script>
$(document).ready(function () {
    $("input[name$='Studio.PackageId']").click(function () {
        var ID = $(this).val();
        if (ID = 1) {
            $(".TrialSub").hide();
        } else {
            $(".TrialSub").show();
        }
    });
});
</script>

脚本正在运行,但无论选择单选按钮如何都会隐藏该部分,因此我猜测ID变量未正确设置但我无法正常工作。

非常感谢帮助...... TJ

2 个答案:

答案 0 :(得分:0)

使用change个事件代替click

您正在使用=,这不是一个等号运算符。如果要检查变量值,请使用==

答案 1 :(得分:0)

您已为所有输入提供了相同的ID(id =&#34; Studio_PackageId&#34;) 因此,无论何时单击某个选项,选择器都会检查所有输入元素的value属性,其中id =&#34; Studio_PackageId&#34;。

相反,您可以使用选择器拦截&#34;点击&#34;在输入元素上:

$("input").click(function () {
    var ID = $(this).val();
    if (ID = 1) {
        $(".TrialSub").hide();
    } else {
        $(".TrialSub").show();
    }
});

在任何情况下,为每个元素提供一个唯一的ID值将有助于您引用它们,同时仍然将它们保存在同一个家庭中#39;单选按钮(都具有相同的名称值):

<input id="Studio_PackageId1" name="Studio.PackageId" type="radio" value="1" /> Option 1</h3>
<input id="Studio_PackageId2" name="Studio.PackageId" type="radio" value="1" /> Option 1</h3>
<input id="Studio_PackageId3" name="Studio.PackageId" type="radio" value="1" /> Option 1</h3>