javascript - MVC5 单选按钮即时隐藏/显示

Question

我曾经通过输入单选按钮的 id 和名称在 Web 窗体开发中使用它，但似乎无法在 MVC5 中使用它，有人可以指出我做错了什么吗？

在单选按钮(模型的一部分)选择上，根据哪个按钮，我希望出现另一个文本框(在 div 中)。

查看:

<div class="ui-grid-solo">
                  <div class="ui-grid-solo">
                    <div class="ui-block-a">
                        <p>AS Number Type</p>
                        <span>
                            @Html.RadioButtonFor(model => model.NumberType, "Odd", true)Odd
                            @Html.RadioButtonFor(model => model.NumberType, "Even", false)Even
                        </span>
                    </div>
                </div>
                @if (Model.NumberType == true)
                {
                    <div id="OddOrEven">
                        <div class="ui-grid-solo">
                            <div class="ui-block-a">
                                <span>
                                    @Html.EditorFor(m => m.Reason)
                                </span>
                            </div>
                        </div>
                    </div>
                }  

JavaScript:

@section Scripts
{
    <script type="text/javascript" src="~/Scripts/maintainscroll.jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[Value='Odd']").click(function () {
                var test = $(this).val();
                $("#OddOrEven").show();
            });
        });
    </script>

}

Answer 1

我会这样做:

@Html.RadioButtonFor(model => model.NumberType, "Odd", true)Odd
@Html.RadioButtonFor(model => model.NumberType, "Even", false)Even

<div id="OddOrEven">
  <div class="ui-grid-solo">
    <div class="ui-block-a">
      <span>
        @Html.EditorFor(m => m.Reason)
      </span>
    </div>
  </div>
</div>

<script>
  $("#OddOrEven").hide();
  $("input[name='NumberType']").on("change", function () {
    if ($(this).val() == "Odd") {
      $("#OddOrEven").show();
    }
  }):
</script>

基本上，通过输入的名称而不是值来获取单选按钮组的更改事件。使用该值的问题是，如果您在同一个 View 上有多个单选按钮组，并且它们每个都有相同的值对(即:true/false)，那么您的 View 将不知道选择哪个单选按钮组。使用名称是正确的方法。