Modify the bg class when the checkbox is selected

Question

Modify the bg class when the checkbox is selected

Currently revamping my portfolio website and could use a hand with some jQuery code. Hoping to make a parent class react to a checkbox within it. Specifically looking to change the background color to #000 when the checkbox is checked.

Struggling to figure out which line of code to incorporate in order for my class to respond to the checkbox. Tried looking up tutorials online, but haven't made much progress. It's probably just a minor tweak that I'm missing, so any assistance would be greatly appreciated.

$("input[type='checkbox']").change(function() {
  if ($(this).is(":checked")) {
    $(this).parent().css('background-color', '#000');
  } else {
    $(this).parent().css('background-color', '#ccc');
  }
});

.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>

javascript jquery css checkbox

Answer 1

Answer №1

To implement a dynamic active state for your products, you can create a more specific CSS selector and use jQuery to toggle the state based on the checkbox value.

Check out this example on how to achieve this: https://jsbin.com/betafupogu/1/edit?html,css,js,output

CSS

.product {
  background-color: #ccc; /* will 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>

Answer 2

To implement a dynamic active state for your products, you can create a more specific CSS selector and use jQuery to toggle the state based on the checkbox value.

Check out this example on how to achieve this: https://jsbin.com/betafupogu/1/edit?html,css,js,output

CSS

.product {
  background-color: #ccc; /* will 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>

Modify the bg class when the checkbox is selected

Answer №1

Similar questions

HTML Canvas resizing challenge

Component encounters issue with undefined props being passed

What is the best way to connect the elements in two separate arrays?

What is the best approach for sending a binary image post request to an API using nodejs?

Having trouble with Node JS res.redirect() not functioning as desired?

What is the best way to retrieve scope variables from multiple directives?

Running the JavaScript function '.hover' using Selenium WebDriver

Utilize conditional styling along with hover effects in ReactJS

Harmonizing various client viewpoints in a ThreeJS scene featuring a unified mesh structure

CSS deep level selectors

The JAVA REST Resource is being triggered twice when downloading a file

Grabbing <object> HTML using jQuery

Include a condition to verify the values

Saving the selected value from a dynamic dropdown menu in a JavaScript application to a MySQL database

What is the best way to extract JSON data from an if statement?

Cloning a table row through editing functionality in ReactJS

Tips for efficiently displaying a computed property on a template using Vuetify?

Selecting elements with a wildcard using JQuery property selectors

Static file serving is malfunctioning

What is the optimal method for saving a dynamic webpage as an object?