Add a class to a specific checkbox when is checked

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);
}