Javascript 选中复选框时更改标签颜色

有人能帮我解决吗？

使用jquery中的parent和toggleClass方法选择标签并添加/删除类

函数切换checkelem{ 洛格伦控制台 $elem.parent.toggleClass'borderBottom' } .borderBottom{ 边框底部：1px实心7f7f7f； } 黑人

---

如果您愿意稍微修改HTML结构，那么您可以在不使用任何Javascript的情况下完成这项工作

您需要将标签放置在输入之后，这样就可以使用相邻的选择器+选择标签，然后基于：checked pseudo selector，您可以切换标签上的边框

查看下面的代码段以了解其工作原理：

myCheckbox:选中+标签{ 边框底部：1px实心7f7f7f； } 黑人 标签{ 位置：相对位置； } .对号{ 位置：绝对位置； 宽度：100%； 左：0； 底部：-4px； 高度：1px； 背景：红色； } 输入：选中+。选中标记{ 背景：绿色； } 黑人

---

在span中找到您的复选框并使用add-remove类

$'.black'.find'input[type=checkbox]'.changefunction{ 如果这个被选中了 $this.parent.addClass'testClass'； 其他的 $this.parent.removeClass'testClass'； }; .testClass{ 边框底部：1px实心7f7f7f； } 黑人

---

到目前为止你试过什么？所以不是一个写我代码的社区伙伴。。继续阅读。changePerfect，标签在复选框后面，所以相邻的选择器工作。这就是我错过的。

<label class="black">Blacks
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

border-bottom: 1px solid #7f7f7f;

<label class="black">Blacks
   <input type="checkbox">
    <span class="checkmark"></span>
</label>


$( 'label' ).on( 'click', 'input:checkbox', function () {
      $( this ).parent().toggleClass( 'highlight', this.checked ); 
    });

label.highlight{border-bottom: 1px solid #7f7f7f;