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

Question

所以我使用 CSS 设置了复选框的样式，并使用此标记设置了 sprite:

<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，选中复选框，然后再次隐藏它，它就会正确显示。

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