CODEWITHSUNDEEP
javascriptjquerycsscheckbox
Jesse Koops
Jesse Koops

Reputation: 29

Change class bg if checkbox is checked

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>

Upvotes: 0

Views: 68

Answers (1)

bassxzero
bassxzero

Reputation: 5041

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>

Upvotes: 4

Related Questions