如果选中复选框,则JQuery hide \ show

时间:2016-09-27 07:51:42

标签: javascript jquery html asp.net-mvc checkbox

我想创建一个表,其中row hide \ show取决于是否选中了标题中的复选框。 我的剧本:

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

});

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

我尝试过以下解决方案:

jQuery if checkbox is checked

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

How to check whether a checkbox is checked in jQuery?

但不幸的是,他们不为我工作,我不知道为什么。

1 个答案:

答案 0 :(得分:1)

您有一个错误的选择器来识别已选中/未选中的元素状态。您可以使用this.checked获取已检查状态,并将其用作.toggle()的参数:

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