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

Sel*_*ohn 1 javascript asp.net-mvc jquery

我以前通过输入单选按钮的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>
                }  
Run Code Online (Sandbox Code Playgroud)

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>

}
Run Code Online (Sandbox Code Playgroud)

Eck*_*ert 6

我会这样做:

@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>
Run Code Online (Sandbox Code Playgroud)

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