css - 检查复选框是否被选中

Question

我想创建下一个逻辑：何时我将选中复选框以为另一个元素应用背景。我想只使用 css 来做到这一点。

div{
  border:1px solid red
}
input:checked .parent {
  background:red;
}

<div class="parent">
  <label for="">Text</label>
  <input type='checkbox'>
</div>

所以我想.parent在我选中复选框时应用背景，但这不起作用。谁知道如何解决这个问题？

标签： css

Answer 1

HTML

<div class="parent">
  <label for="">Text</label>
  <input type='checkbox'>
</div>

CSS

div{
  border:1px solid red
}
.selected{
  background:red;
}

jQuery

 $('input:checkbox').change(function(){
   if($(this).is(':checked')) 
       $(this).parent().addClass('selected'); 
  else 
      $(this).parent().removeClass('selected')
 });

输出