Add a class to a specific checkbox when is checked

Question

I have an foreach echo, which displays a list of items on my website and I want to make a system to add a green background (when a checkbox is checked) and remove that checkbox when its no more checked.

echo '<form action="selector.php" id="form1" method="post" target="_self">';

foreach ($Query as $row) {  
  echo '
    <div class="item">
      <img src="something.png">
                            
      <label class="containerPen" style="color: #00ff00">
        Accept                              
        <input type="checkbox"  name="accepted[]" value="'.$row['topic_identification'].'" id="accepted"></input>
        </br>
        <span class="checkmarkPen"></span>
      </label>
                        
      <label class="containerPenX" style="color: #ff0000">
        Decline
        <input type="checkbox" name="declined[]" value="'.$row['topic_identification'].'" id="declined"></input>
        <span class="checkmarkPenX"></span>
      </label>
    </div>          
  ';
}

echo '
  <input type="submit" name="submit" value="submit"> 

  </form>
';

For each checkbox, I want to add the class

.greenbox {
  background-color: green;
}

when it's checked, and when I uncheck it, I want it to remove the class.

Thank you!

Here is the CSS For the class ContainerPen and CheckmarkPen

    .containerPen {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.containerPen input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmarkPen {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


.containerPen:hover input ~ .checkmarkPen {
  background-color: #00ff00;
}


.containerPen input:checked ~ .checkmarkPen {
  background-color: #00ff00;

}


.checkmarkPen:after {
  content: "";
  position: absolute;
  display: none;
}


.containerPen input:checked ~ .checkmarkPen:after {
  display: block;
}


.containerPen .checkmarkPen:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Answer 1

As an alternative method;

Depending on which browsers you are supporting, you can simply do what you're trying to do through the CSS :checked pseudo-class selector.

You can read up on it here and see compatibility here.

Usage example would be;

input:checked
{
    background-color: green;
}

Or something like;

label input:checked
{
    background-color: green;
}

If you only want to have it affect inputs inside labels. Note that this selector will also apply to radio buttons or options inside selects.

Answer 2

$onload = <<<EOT
 <script>    
    window.onload = function() {
       const chk = document.querySelectorAll('input[type="checkbox"]');
       for(let x=0; x< chk.length; x++) {
        chk[x].addEventListener('change', function (e) {
          if (e.target.checked) e.target.classList.add('greenbox');
          else e.target.classList.remove('greenbox')
       })
      }
    }
</script>

EOT;

// then add it where you want.

echo $onload;

Important This kind of echo is called Heredoc and has 2 requirements (or it will error out). There can be NO spaces after the initial <<<EOT (just a line break), and there can be no spaces before the closing EOT;. In fact, the last line can only be EOT; Just make sure about the spaces. Otherwise, it's a great way to form a readable php output for things like html and javascript blocks.

Answer 3

you can either add an eventListener or an onclick event on both checkboxes that pass the id to the function.

Then you can use JavaScript's built-in classlist properties to add and remove class.

const addClass = (id) => {
    let checkbox = document.querySelector(`#${id}`);
    checkbox.classList.toggle('greenbox');
}

.greenbox{
  background-color: green;
}

<input type="checkbox" onclick="addClass(this.id)" id="accepted">    
<input type="checkbox" onclick="addClass(this.id)" id="declined">