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

Question

I am new to using jQuery. I am using c#/net to create and edit view. In my create view I have:

<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();
        }
    });

Which works fine so if the pregnant tick box is ticked the due date appears.

The problem I have is when I go to the edit page... If i use the same code if the the dueDate is hidden on load no matter if the tick box is ticked or not. Which is what the code says.

I would like it however in the edit page to check if the tick box is ticked and then do the proper show or hide on load. -- I'm new to jQuery so don't know what to do.

Pseudocode it would be:

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

I have tried:

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

Hopefully this makes sense.

Answer 1

if there is ONE checkbox with id="Pregnant" and one or more elements with class="duedate" then the code could be

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

If there are more than one checkbox, you cannot use ID since it must be unique, use class instead and then possibly the data attribute if you need to show a specific duedate

Answer 2

Before you run the $('.dueDate').hide(); code, you can just add an if so that it only hides if the checkbox is unchecked.

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