1

そこで、このマークアップを使用して、CSS とスプライトでチェックボックスのスタイルを設定しました。

<div class="open-checkbox">
   <label class="open-checkbox">
      <input id="<?php echo $id; ?>" class="key-areas-checkbox" name="interests[]" type="checkbox" value="<?php echo $label; ?>" />
   </label>
</div>

そしてこのJS：

$(".key-areas-checkbox:checked").each(function(){
    $(this).next().addClass('checked');
});

$('.open-checkbox').click(function () {
    console.log('click');
    var $this = $(this);
    var $input = $this.find('input');

    $this.toggleClass('checked', $input.is(':checked'));
    return;

    if($input.prop('checked')){
        $this.removeClass('checked');
    } else {
        $this.addClass('checked');
    }
});

これは、IE8 と IE7 を除くすべてのブラウザーで機能します。これらのブラウザでこれを機能させる方法を知っている人はいますか? 参考までに - 入力は非表示になっています。visibility:visible を作成し、チェックボックスをオンにしてから再度非表示にすると、正しく表示されることに気付きました。

4

1 に答える 1

1

まず第一に、これは本当に悪い考えです:

<div class="      open-checkbox  ">
   <label class=" open-checkbox  ">

よりも：

$(".key-areas-checkbox:checked").each(function(){
    $(this).next().addClass('checked'); // next? you have no next element!
});

また：

return; // Exit function and...

// ...forget about this code.
if($input.prop('checked')){
    $this.removeClass('checked');
} else {
    $this.addClass('checked');
}

私はするだろう：

$('.open-checkbox-label').click(function( e ) {

    e.preventDefault(); 
    var $lab = $(this);   
    $lab.toggleClass('checked');
    // not sure what are you trying to do here with inputs...

});

言うまでもありません: LABEL 要素の新しいクラスに注意してください。さらに、console.log のブラウザー サポートに注意する必要があります。それを修正する方法に関して、SO には多くの回答があります。

于 2013-09-17T21:54:43.810 に答える