Javascript 复选框不'；不检查

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

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

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

当复选框为check时，jquery在元素中淡出，并将一些html写入元素中。唯一的问题是，当您单击复选框时，它没有收到“check”。

请尝试以下操作：

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

---

请注意，

toggle（）

已被弃用。

的可能重复，更不用说快速的谷歌搜索会显示其他几个类似的问题。非常好。谢谢你的认真。