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>

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

Answer 2

删除 div 周围的@if，将 div css 类设置为在页面加载时隐藏，然后您的按钮将起作用，但是单击它仍会将其保留在那里，添加到 javascript 以再次隐藏文本框。

所以删除 @if 将您的 div 更改为 <div id="OddOrEven" style="display:none"> 以及您的 script 中的以下内容：

$(document).ready(function () {
            $("input[Value='Odd']").click(function () {
                $("#OddOrEven").show();
            });
            $("input[Value='Even']").click(function () {
                $("#OddOrEven").hide();
            });
        });