Check if the checkbox is checked

Question

I want to create the next logic: when i will check the checkbox to apply a background for another element. I want to do this using only css.

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

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

So i want to apply a background for .parent when i check the checkbox, but this doesn't work. Who knows how to solve this?

@Roy, no, because in my case i cant change the html. I don't have acces — , Nov 05 '19 at 08:04
@epanalepsis, i'm looking for an answer which uses only css, not JQUERY — , Nov 05 '19 at 08:23

score 0 · Answer 1 · answered Nov 05 '19 at 08:18

0

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

Output

answered Nov 05 '19 at 08:18

Par Tha

1,265
7
10

i'm looking for an answer which uses only css, not JQUERY – Nov 05 '19 at 08:24

Check if the checkbox is checked

1 Answers1