如果选中复选框，则 JQuery 隐藏\显示答案

【问题标题】：JQuery hide\show if checkbox is checked如果选中复选框，则 JQuery 隐藏\显示
【发布时间】：2017-02-04 18:07:30
【问题描述】：

我想制作一个表格，其中行隐藏\显示取决于是否选中了标题中的复选框。我的脚本：

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

但不幸的是，它们对我不起作用，我不知道为什么。

【问题讨论】：

show 是一个方法，用括号调用它... => jQuery.show()
应该是$(this).is(":checked")更好用this.checked，你只要用$("#ShowPersonalDataList").change(function () { $(".PersonalDataInset").toogle(this.checked); });就行了
要检查checked 状态，请使用this.checked...
@Satpal 只是想澄清一下$(this).is(":checked") 和this.checked 有什么问题，另一个是 jQuery，另一个是普通的？
@guradio，它很简单，当原生对象为您提供所需的数据时，为什么需要使用$(this) 创建一个 jQuery 对象然后调用该方法

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

【解决方案1】：

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

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

【讨论】：