Question

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

当我选中复选框时，我想在我的<label>下面应用CSS：

border-bottom: 1px solid #7f7f7f;

任何人都可以帮我解决吗？

Answer 1

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

function toggleCheck(elem) {
  console.log(elem)
  $(elem).parent().toggleClass('borderBottom')


}

.borderBottom {
  border-bottom: 1px solid #7f7f7f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
  <input type="checkbox" onchange="toggleCheck(this)">
  <span class="checkmark"></span>
</label>

Answer 2

如果您愿意稍微修改HTML结构，则可以在没有任何Javascript的情况下执行此操作。

您需要在输入后放置标签，因此它允许使用相邻选择器（+）选择标签，然后基于:checked伪选择器，您可以切换边框标签

检查下面的代码段，看看它是如何运作的：

＆＃13;

#myCheckbox:checked + label {
  border-bottom: 1px solid #7f7f7f;
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

label{
  position: relative;
}
.checkmark{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -4px;
  height: 1px;
  background: red;
}
input:checked + .checkmark{
  background: green;
}

＆＃13;

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

＆＃13;

Answer 4

在您的范围内找到您的复选框，然后使用添加删除类。

$('.black').find('input[type=checkbox]').change(function() {
  if (this.checked)
    $(this).parent().addClass('testClass');
  else
    $(this).parent().removeClass('testClass');
});

.testClass {
border-bottom: 1px solid #7f7f7f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="black">Blacks
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Answer 5

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


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

在css

中应用以下标签样式

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

选中复选框后更改标签颜色

5 个答案: