複選框不檢查

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()已被棄用。