Question

我有这个jQuery代码，我不确定它是否可以优化（缩短）：

//Checkboxes highlight
$('.show-results-from label').addClass('active');
$('input:checkbox').click(function(){       
    if ($('input:checkbox#a').is(':checked')) {
        $('.label-a').addClass('active');
        $
    } else {
        $('.label-a').removeClass('active');
    }
    if ($('input:checkbox#b').is(':checked')) {
        $('.label-b').addClass('active');
        $
    } else {
        $('.label-b').removeClass('active');
    }
    if ($('input:checkbox#c').is(':checked')) {
        $('.label-c').addClass('active');
        $
    } else {
        $('.label-c').removeClass('active');
    }
});

这是相应的HTML：

<div class="show-results-from">
  <ul>
    <li>See results from:</li>
    <li>
      <label class="label-a">
        <input name="a" type="checkbox" id="a" value="tabs1" checked disabled>
        Products &amp; Services <span>(16)</span></label>
    </li>
    <li>
      <label class="label-b">
        <input name="b" type="checkbox" id="b" value="tabs2" checked>
        Publications <span>(9)</span></label>
    </li>
    <li>
      <label class="label-c">
        <input name="c" type="checkbox" id="c" value="tabs3" checked>
        Other <span>(150)</span></label>
    </li>
  </ul>
</div>

这里发生的事情是，在页面加载时，所有标签都添加了一个类，通过CSS，类的样式可以直观地告知用户选中该复选框。

当他们点击标签或复选框时，该类将被删除，并且用户可以直观地知道该复选框已取消选中。

就是这样。

是否可以优化jQuery代码？或者我可以保留它吗？...它看起来对我来说太重复了，但我不是JavaScript大师。

提前感谢您提供任何帮助。

Answer 1

是的，你可以缩短你的click处理程序（或change，我更喜欢这里），然后相对地找到<label>，就像这样：

$('input:checkbox').change(function(){ 
  $(this).parent().toggleClass('active', this.checked);
});

这会使用.parent()来获取<label>，然后使用.toggleClass()来启用/关闭.active课程，具体取决于是否已选中。