Using a checkbox with jquery

Question

I have a function below that I want when the checkbox box is checked the dropdwonlist show up, and when the checkbox is not checked hide the dropdownlist. tha't it.

I appreciate your help.

JS

$(function () {
    if ($('#test').is(':checked')) {
        $('#dog').show();
    }
});

Razor

<div class="form-group" id="dog" style="display:none">
  @Html.LabelFor(model => model.Pet.Raca, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10" style="padding-top:6px">

    @Html.DropDownListFor(model => model.Pet.Raca, new List<SelectListItem>
      {
        new SelectListItem() {Text = "SRD - sem raça definida", Value="SRD - sem raça definida"},
        new SelectListItem() {Text = "Beagle", Value="Beagle"},
        new SelectListItem() {Text = "Border Collie", Value="Border Collie"},
        new SelectListItem() {Text = "Buldogue Inglês", Value="Buldogue Inglês"},
        new SelectListItem() {Text = "Buldogue Francês", Value="Buldogue Francês"},
        new SelectListItem() {Text = "Chow Chow", Value="Chow Chow"},
        new SelectListItem() {Text = "Cocker Spaniel", Value="Cocker Spaniel"},
        new SelectListItem() {Text = "Dachshund", Value="Dachshund"},
        new SelectListItem() {Text = "Golden Retriever", Value="Golden Retriever"},
        new SelectListItem() {Text = "Labrador", Value="Labrador"},
        new SelectListItem() {Text = "Lhasa Apso", Value="Lhasa Apso"},
        new SelectListItem() {Text = "Maltês", Value="Maltês"},
        new SelectListItem() {Text = "Pastor Alemão", Value="Pastor Alemão"},
        new SelectListItem() {Text = "Pinscher", Value="Pinscher"},
        new SelectListItem() {Text = "Pitbull", Value="Pitbull"},
        new SelectListItem() {Text = "Poodle", Value="Poodle"},
        new SelectListItem() {Text = "Pug", Value="Pug"},
        new SelectListItem() {Text = "Shih Tzu", Value="Shih Tzu"},
        new SelectListItem() {Text = "Schnauzer", Value="Schnauzer"},
        new SelectListItem() {Text = "Spitz Alemão", Value="Spitz Alemão"},
        new SelectListItem() {Text = "Yorkshire Terrier", Value="Yorkshire Terrier"},
        new SelectListItem() {Text = "Outra Raça...", Value="Outra Raça..."}                   
    })
    @Html.ValidationMessageFor(model => model.Pet.Raca, "", new { @class = "text-danger" })
  <div>
</div>

I hope you guys can help me. TY.

You need to look into a change event handler for the checkbox. Ref. learn.jquery.com/events — Taplar
– Taplar, Commented Feb 26, 2018 at 18:11

Tom John · Accepted Answer · 2018-02-26 20:33:43Z

1

Assuming you have a check box with the Id myCheckBox add the following in your scripts at the end of the page. This will add an event handler on document ready that will hide and show your list:

    $("#myCheckBox").on("change", function () {
        if ($(this).is(":checked")) {
            $("#dog").show();
        }
        else {
            $("#dog").hide();
        }
    });

Here's a fiddle of it working:

https://jsfiddle.net/zpyhh7fx/4/

edited Feb 26, 2018 at 20:33

answered Feb 26, 2018 at 20:26

Tom John

7945 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a checkbox with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related