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 之外的所有浏览器。有谁知道如何在这些浏览器中进行这项工作？仅供参考 - 输入是隐藏的。我注意到，如果我让可见性：可见，选中复选框，然后再次隐藏它，它会正确显示。

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