jQuery，选中复选框，然后根据需要隐藏并清空值

Question

我是使用jQuery的新手。 我正在使用c＃/ net创建和编辑视图。 在我的创建视图中，我有：

<div class="editor-label">
    @Html.LabelFor(model => model.Pregnant)
</div>

<div class="editor-field">
    @Html.EditorFor(model => model.Pregnant)
    @Html.ValidationMessageFor(model => model.Pregnant)
</div>

<div class="editor-label dueDate">
    @Html.LabelFor(model => model.DueDate)
</div>

<div class="editor-field dueDate">
    @Html.TextBox("DueDate", null, new { @class = "datepicker" }) 
    @Html.ValidationMessageFor(model => model.DueDate)
</div>

$(function() {
    $('.dueDate').hide();
    $('#Pregnant').change(function() {
        if ($('#Pregnant').is(':checked')) {
            $('.dueDate').show();
        }
        else {
            $('.dueDate').hide();
        }
    });

效果很好，因此如果选中了孕妇的勾选框，则会显示到期日。

我遇到的问题是，当我进入编辑页面时...如果我勾选了相同的代码，则无论是否选中复选框， dueDate在加载时都是隐藏的。 代码是这样写的。

但是，我希望在编辑页面中检查复选框是否被打勾，然后进行适当的显示或隐藏。 -我是jQuery的新手，所以不知道该怎么做。

伪代码将是：

onload
    if #pregnant.is checked
        then show dueDate
    else
        dueDate.hide and empty dueDate Value

我努力了：

$('.dueDate').val('');

希望这是有道理的。

Answer 1

如果存在一个带有id="Pregnant"复选框和一个或多个class="duedate"元素，则代码可能是

 $('#Pregnant').on("click",function () {
   $('.dueDate').toggle(this.checked);
 });

如果有多个复选框，则不能使用ID，因为它必须是唯一的，如果需要显示特定的到期日期，请使用class，然后使用data属性

Answer 2

在运行$（'。dueDate'）。hide（）;之前 代码，则只需添加一个if，以便仅在未选中此复选框时隐藏它。

if (!$('#Pregnant').is(':checked'))
    $('.dueDate').hide();