How to Change class after unchecking radio button

Question

I try to change style of my class modal after radio button is unchecked, but it does not work. It only adds class card-modal-2 but not removing it. I tried stuff sth like nextElementSibling etc but still no progress. I'll be very glad for any help.

const modal = document.getElementsByClassName("modal")[0];
const gridModal = modal.getElementsByClassName("grid-modal")[0];

var checkbox = document.querySelectorAll("input[name=group-1]");

for (let i = 0; i < modal.childElementCount - 1; i++) {
  let cardModal = gridModal.getElementsByClassName("card-modal")[i];
  checkbox[i].addEventListener("change", function() {
    if (this.checked) {
      cardModal.classList.add("card-modal-2");
    } else {
      cardModal.classList.remove("card-modal-2");
    }

  });

}

<div class="grid-modal">

  <div class="card-modal">
    <label class="radio-label"><h4>Pledge with no reward</h4>
     <input class ="radio" type="radio" name="group-1"  autocomplete="off" checked="false">
     <span class="check"></span>
     </label>
    <p></p>
    <p class="first-label"> Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p>
  </div>

  <div class="card-modal">
    <label class="radio-label">Bamboo Stand
    <input class ="radio" type="radio" name="group-1"  autocomplete="off" checked="false">
    <span class="check"></span>
    </label>
    <p>Pledge $25 or more</p>
    <p> You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.</p>
    <h4>101</h4>
    <p>left</p>
  </div>

</div>

Answer 1

Let's start with the solution:

<div class="grid-modal">

  <div class="card-modal">
    <label class="radio-label"><h4>Pledge with no reward</h4>
     <input class ="radio" type="radio" name="group-1"  autocomplete="off" checked="false">
     <span class="check"></span>
     </label>
    <p></p>
    <p class="first-label"> Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.</p>
  </div>

  <div class="card-modal">
    <label class="radio-label">Bamboo Stand
    <input class ="radio" type="radio" name="group-1"  autocomplete="off" checked="false">
    <span class="check"></span>
    </label>
    <p>Pledge $25 or more</p>
    <p> You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.</p>
    <h4>101</h4>
    <p>left</p>
  </div>

</div>
<script>
const gridModal = document.getElementsByClassName("grid-modal")[0];

var checkbox = document.querySelectorAll("input[name=group-1]");
var cardModals = gridModal.getElementsByClassName("card-modal");
for (let i = 0; i < checkbox.length; i++) {
  checkbox[i].addEventListener("change", function() {
    for (let j = 0; j < cardModals.length; j++)
    if (i === j) {
      cardModals[j].classList.add("card-modal-2");
    } else {
      cardModals[j].classList.remove("card-modal-2");
    }

  });

}
</script>

Explanation: You do not uncheck a radio button (it's not a checkbox), you are checking the other where the class is correctly added. You need to add the class to the checked radio button and remove the class from the others.