when checkbox is checked, change background color of div-CodePudding

What I'm trying to do is when the checkbox is checked, change the background color of the div, and when it's unchecked, remove the background color. How can I do this using jquery?

<div >
    <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
      <label for="personal-info-checkbox"> Mark as reviewed and acknowledged
      </label>
 </div>

using parent selector and .removeclass I do not know how to select my div and turn the color off and on using jquery.

CodePudding user response：

You don't need jQuery for this
You can do this only with css.

    .checkbox-container:has(input:checked) {
    background-color: red;
}

:has pseudo class is supported in chromium, safari.
For firefox, need to enable flag. know more at mdn ::has pseudo class

CodePudding user response：

Add a change event listener to the input that sets its closest parent div's background color based on whether it is checked:

$('input[type="checkbox"]').change(function(){
  $(this).closest('div').css('background-color', this.checked ? 'green' : 'white')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
      <label for="personal-info-checkbox"> Mark as reviewed and acknowledged
      </label>
 </div>

CodePudding user response：

Try this I hope this will help you

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#personal-info-checkbox").click(function(){
    if($(this).is(":checked")){
        $(this).parent().addClass("color-blue");
    }else {
        $(this).parent().removeClass("color-blue");
    }
  });
});
</script>
<style>
 .checkbox-container
 {
     padding:20px;
 }
 .color-blue {
     background-color:blue;
 }

</style>
</head>
<body>

<div >
    <input type="checkbox" class ="checkbox-border" id="personal-info-checkbox">
      <label for="personal-info-checkbox"> Mark as reviewed and acknowledged
      </label>
 </div>

</body>
</html>

CodePudding user response：

Here's an example of how you can do this

$(function() {
  $("input[type=checkbox]").click( () => {
    $("div").toggleClass("background");
  })
});

.background {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:4em;">
Change colors<input type="checkbox" />
</div>

CodePudding user response：

There are a number of ways to do this:

CSS (with limited, as of writing, browser support),
jQuery (among other libraries), and
native JavaScript.

The below example has explanatory comments in the code:

// using jQuery, we select the relevant element via its class, and use the on()
// method to bind the anonymous function as the event-handler for the 'change'
// event:
$('.checkbox-container.with-jQuery').on('change', function(){
  // here we find the <input> element descendant with find(), and then use the
  // is() method to test that element to see if it matches the :checked pseudo-
  // class; this returns a Boolean true/false which is cached in the 'checked'
  // variable:
    let checked = $(this).find('input').is(':checked');
  
  // here we use toggleClass() to toggle the 'checked' class-name on the element,
  // and use the 'checked' variable to ascertain whether the class should be
  // added/retained (if the Boolean is true) or removed/not-added (if the Boolean
  // is false):
    $(this).toggleClass('checked', checked);
});


// using JavaScript we use document.querySelector to retrieve the element
// with the listed classes; and use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'change' event:
document.querySelector('.with-JavaScript.checkbox-container').addEventListener('change',(evt)=>{
  // we cache a reference to the current element (the <div>):
    let current = evt.currentTarget,
      // we find the <input> descendant, and access its checked property to
      // obtain a Boolean true (if checked) or false (if not-checked) and
      // store that Boolean in the 'checked' variable:
        checked = current.querySelector('input').checked;
  // here we use Element.classList.add() to add the 'active' class-name,
  // with the checked variable to determine if it should be added/retained
  // (if true) or removed/not-added (if false):
    current.classList.add('active', checked);
});

:root {
  --checkedColor: lime;
}

/* here we select the element via classes, and use :has()
   to check if it has a descendant element which matches
   the enclosed selector: */
.with-CSS.checkbox-container:has(input:checked) {
  /* if so, we set the --checkedColor custom property
     as the background-color of the element: */
  background-color: var(--checkedColor);
}

.with-jQuery.checkbox-container.checked {
  background-color: var(--checkedColor);
}

.with-JavaScript.checkbox-container.active {
  background-color: var(--checkedColor);
}

<!-- each wrapper <div> has a 'with-...' class applied in order to identify which
     approach is being taken: -->
<div >
  <!-- an id must be unique, to that end - because there are three checkboxes in
       this example - the id has been modified, as has the corresponding <label>
       element's 'for' attribute: -->
  <input type="checkbox"  id="personal-info-checkbox1">
  <label for="personal-info-checkbox1"> Mark as reviewed and acknowledged
  </label>
</div>

<div >
  <input type="checkbox"  id="personal-info-checkbox2">
  <label for="personal-info-checkbox2"> Mark as reviewed and acknowledged
  </label>
</div>

<div >
  <input type="checkbox"  id="personal-info-checkbox3">
  <label for="personal-info-checkbox3"> Mark as reviewed and acknowledged
  </label>
</div>

References:

Browser compatibility:
- :has().
CSS:
- CSS Custom properties.
- :checked.
- :has().
- var().
JavaScript:
- document.querySelector().
- Element.classList API.
jQuery@
- is().
- on().
- toggleClass().