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

Posted

技术标签:

【中文标题】取消选中单选按钮后如何更改课程【英文标题】:How to Change class after unchecking radio button 【发布时间】:2021-07-27 18:24:23 【问题描述】:

取消选中单选按钮后,我尝试更改班级模式的样式,但它不起作用。它只添加类 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>

【问题讨论】:

尝试检查,未检查=“false”;只是检查或不检查。 checked : ``> ​​ 【参考方案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>

说明:您没有取消选中单选按钮(它不是复选框),您正在检查正确添加类的另一个。您需要将该类添加到选中的单选按钮并从其他类中删除该类。

【讨论】:

以上是关于取消选中单选按钮后如何更改课程的主要内容,如果未能解决你的问题,请参考以下文章

双击后如何取消选中单选按钮?

如何取消选中或清除单选按钮组?

点击后问卷单选按钮取消选中

如何从 Javascript 更改 HTML 单选按钮选择?

如何取消选中或重置单选按钮?

取消选中反应中的单选按钮