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

Question

刚开始玩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

Answer 1

使用change事件而不是click 。

您正在使用= ，但它不是一个等于运算符。 如果要检查变量的值，请使用== 。

Answer 2

您已为所有输入提供了相同的ID（id =“ Studio_PackageId”），因此，每当单击某个选项时，选择器都会检查所有具有id =“ Studio_PackageId”的输入元素的value属性。

相反，您可以使用选择器来拦截输入元素上的“点击”：

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

在任何情况下，为每个元素赋予唯一的ID值将有助于您引用它们，同时仍将它们保留在同一个“单族”单选按钮系列中（所有按钮均具有相同的名称值）：

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