Question

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

在单选按钮（模型的一部分）选择中，根据哪个按钮，我想要显示另一个文本框（在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>

基本上，按输入的名称而不是值来获取单选按钮组的更改事件。使用该值的问题是，如果在同一视图上有多个单选按钮组，并且它们各自具有相同的值对（即：true / false），则您的视图将不知道要选择哪个无线电组。使用名称是正确的方法。

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();
            });
        });

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

2 个答案: