javascript - 复选框不勾选

Question

我有一些带有相关字段的复选框，标记如下:

<div class="job-position" id="bartending">
    <div>
        <input type="checkbox" id="bartending-checkbox" name="bartending" value="Bartending" />
        Bartending
        <br />
        <span class="experience"></span>
        <!-- html here completed with jquery -->
    </div>
<div class="reference">Reference 
        <span class="instructions">(Name &amp; Phone)</span>
        <br />
        <input type="text" name="bartending-reference" />
    </div>
</div>

还有一些像这样的 jquery:

$('input:checkbox').toggle(function(event){
    var jobPositionId=event.target.id
    $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference')
        .fadeIn(200);
    $('input#' + jobPositionId).parent('div').find('span.experience').html(some html here);

},function(event){
     var jobPositionId=event.target.id
     $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference')
         .fadeOut(200);
     $('input#' + jobPositionId).parent('div').find('span.experience').html('');
});

当选中复选框时，jquery 淡入一个元素并将一些 html 写入 .唯一的问题是当您单击该复选框时，该复选框不会收到“选中”。

Answer 1

尝试以下操作:

$('input:checkbox').change(function(event){
    if (this.checked) {
        var jobPositionId = event.target.id
        $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeIn(200);
        $('input#' + jobPositionId).parent('div').find('span.experience').html("some html here");
    }  else {
        var jobPositionId=event.target.id
        $('div.job-position' + '#' + jobPositionId + ' select' + ',' + 'div.job-position' + '#' + jobPositionId + ' div.reference').fadeOut(200);
        $('input#' + jobPositionId).parent('div').find('span.experience').html('');
    }
});

DEMO

请注意，toggle() 已弃用。