javascript - MVC5 Radio Button Instant HideShow - Stack Overflow

admin管理员组

文章数量:1303335

I used to use this in Web Form development through the id and name of the input radio button, but can't seem to get it in MVC5, could someone point out what I'm doing wrong?

On a radio button (part of the model) selection, depending which button, I want another text box to appear (within a div).

View:

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

}

I used to use this in Web Form development through the id and name of the input radio button, but can't seem to get it in MVC5, could someone point out what I'm doing wrong?

On a radio button (part of the model) selection, depending which button, I want another text box to appear (within a div).

View:

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

}

• javascript
• jquery
• asp-mvc

Share Improve this question Follow asked May 12, 2015 at 13:31 SelrekJohnSelrekJohn 47622 gold badges77 silver badges2323 bronze badges 4

• "input[Value='Odd']" this does'nt selected the element? – DontVoteMeDown Commented May 12, 2015 at 13:33
• It's not working for me :( – SelrekJohn Commented May 12, 2015 at 13:35
• Sorry but I can't understand what doesn't really works. Won't you post the result html generated from razor? – DontVoteMeDown Commented May 12, 2015 at 13:37
• What @purplesmurf said worked, guess the model was blocking the js or something. – SelrekJohn Commented May 12, 2015 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I would do it like this:

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

Basically, grab the change event of your radio button group by the input's name, rather than the value. The issue with using the value is that if you have multiple radio button groups on the same view, and they each have the same value pairs (ie: true/false), then your view would not know which radio group to select. Using name is the proper way to go.

Remove the @if surrounding the div, set the div css class to hidden on page load, then your button will work, however clicking off of it will still leave it there, add to the javascript to hide the textbox again.

So remove that @if change your div to <div id="OddOrEven" style="display:none"> and the below within your script:

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

本文标签： javascriptMVC5 Radio Button Instant HideShowStack Overflow