jQuery:优化代码(标签中的背景)

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类(class)开/关取决于是否选中。