CODEWITHSUNDEEP
jqueryasp.net-mvc
caio oliveira
caio oliveira

Reputation: 9

Using a checkbox with jquery

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.

Upvotes: 0

Views: 42

Answers (1)

Tom John
Tom John

Reputation: 784

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/

Upvotes: 1

Related Questions