復選框不檢查

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() 。