Question

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

Answer 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的支持，关于如何解决这个问题有很多答案。}

我用标签设置了复选框，但我的JavaScript在IE8中不起作用

1 个答案: