How to Change class after unchecking radio button Code Answer

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

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.

Related Posts

© No Copyrights, All Questions are retrived from public domain.
Tutorial Guruji