检查复选框是否已选中

Question

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

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

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

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

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')
 });

输出