取消选中单选按钮后如何更改 class

Question

未选中单选按钮后，我尝试更改 class 模态的样式，但它不起作用。 它只添加了 class card-modal-2 但没有删除它。 我尝试了诸如 nextElementSibling 之类的东西，但仍然没有进展。 我会很高兴得到任何帮助。

 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

让我们从解决方案开始：

 <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>

说明：您没有取消选中单选按钮（它不是复选框），您正在检查正确添加 class 的另一个。 您需要将 class 添加到选中的单选按钮，并从其他按钮中删除 class。