javascript - 取消选中单选按钮后如何更改课程
问题描述
在未选中单选按钮后,我尝试更改我的类模式的样式,但它不起作用。它只添加类 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>
解决方案
让我们从解决方案开始:
<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 - Video.js and loading a segment in handleSegmentResponse
- javascript - Script error : "Uncaught SyntaxError: Unexpected identifier"
- c# - Update values in ConcurrentDictionary
> - c# - MSMQ 触发器,它们与使用 BeginPeek 和 EndPeek 有什么不同。C#
- qt - 如何使用 QAbstractTableModel 在 QML 中设置 TableViewColumn 的模型列索引
- java - 如何从最近的任务中删除应用程序或活动
- sql - SQL Join 三表 17
- git - vNext 构建管道以将远程 git 同步到本地存储库
- google-cloud-automl - 从 PredictionClient 获取检测到的对象的集合
- react-data-grid - 如何以编程方式设置单元格中文本的颜色