如果选中复选框，则更改类bg

Question

I'm working on my portfolio website and need some help with a bit jQuery code. I want a parent class to react to the checkbox in it. In this case, the background color needs to change to #000 when the checkbox is active/checked.

I don't know what line of code to add to make my class react to the checkbox. I've searched on google on how to do it but didn't get much wiser. It's probably a really small thing but I would hope to get some help from you guys.

 $("input[type='checkbox']").change(function() { if ($(this).is(":checked")) { $(this).parent(); } else { $(this).parent(); } }); 

 .product { background-color: #ccc; /* needs to change to #000 when active */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="product"> <input class="check" type="checkbox" name="logo"> Logo </div> 

Answer 1

Basically you create a second (more specific) css selector for the active state, then you use your jQuery to toggle that state/class based on the checkbox value.

https://jsbin.com/betafupogu/1/edit?html,css,js,output

CSS

.product {
  background-color: #ccc; /* needs to change to #000 when active */
}

.product.active {
  background-color: #000; 
}

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>

        $("input[type='checkbox']").change(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass('active'); 
    }else{
        $(this).parent().removeClass('active'); 
    }
});

</script>