1

次のようにマークアップされた関連フィールドを持つチェックボックスがいくつかあります。

<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 を に書き込みます。唯一の問題は、クリックしたときにチェックボックスが「チェック」を受け取らないことです。

4

1 に答える 1

3

次のことを試してください。

$('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()推奨されていないことに注意してください。

于 2012-07-27T22:16:14.863 に答える