JQuery hide\show if checkbox is checked

Question

I want to make a table where row hide\show depending on if checkbox in the header is checked or not. My script:

<script contextmenu="text/javascript">
$(document).ready(function () {
    $("#ShowPersonalDataList").change(function () {
        if($(this).is("checked")){
            $(".PersonalDataInset").Show;
            return
        } else
            $(".PersonalDataInset").hide;
    });

});

My HTML :

<div id="CheckBoxTables">
    <table class="CBTable">
        <tr>
            <th>
                @Html.LabelFor(m => m.ColumnsNeeded.PersonalDataPartBool)
                @Html.CheckBoxFor(m => m.ColumnsNeeded.PersonalDataPartBool, new { id = "ShowPersonalDataList" })
            </th>
        </tr>
        <tr>
            <td class="PersonalDataInset">
                @Html.LabelFor(m => m.ColumnsNeeded.FirstNameBool)
                @Html.CheckBoxFor(m => m.ColumnsNeeded.FirstNameBool)
            </td>
        </tr>
        <tr>
            <td class="PersonalDataInset">
                @Html.LabelFor(m => m.ColumnsNeeded.LastNameBool)
                @Html.CheckBoxFor(m => m.ColumnsNeeded.LastNameBool)
            </td>
        </tr>
        <tr>
            <td class="PersonalDataInset">
                @Html.LabelFor(m => m.ColumnsNeeded.AppointmentBool)
                @Html.CheckBoxFor(m => m.ColumnsNeeded.AppointmentBool)
            </td>
        </tr>
        <tr>
            <td class="PersonalDataInset">
                @Html.LabelFor(m => m.ColumnsNeeded.DivisionBool)
                @Html.CheckBoxFor(m => m.ColumnsNeeded.DivisionBool)
            </td>
        </tr>
    </table>
</div>

I have tried solutions from:

jQuery if checkbox is checked

jQuery, checkboxes and .is(":checked")

How to check whether a checkbox is checked in jQuery?

But unfortunately they don't work for me, i don't know why.

show is a method, call it with parenthesis... => jQuery.show() — Rayon
– Rayon, Commented Sep 27, 2016 at 7:52
It should be $(this).is(":checked") better use this.checked, You just need to use $("#ShowPersonalDataList").change(function () { $(".PersonalDataInset").toogle(this.checked); }); — Satpal
– Satpal, Commented Sep 27, 2016 at 7:52
@Satpal just want to clarify what is wrong with $(this).is(":checked") is not the same as this.checked just the other is jQuery and the other is plain? — guradio
– guradio, Commented Sep 27, 2016 at 7:54
@guradio, Its simple and When native object is providing you the required data, Why do you need to create a jQuery object using $(this) then invoking the method — Satpal
– Satpal, Commented Sep 27, 2016 at 7:56

Milind Anantwar · Accepted Answer · 2016-09-27 07:54:25Z

1

You have a wrong selector to identify state of element as checked/unchecked. you can use this.checked to get checked state and use it as argument to .toggle():

$("#ShowPersonalDataList").change(function () {
   $(".PersonalDataInset").toggle(this.checked);
});

answered Sep 27, 2016 at 7:54

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Collectives™ on Stack Overflow

JQuery hide\show if checkbox is checked

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related