切换CheckBox
切换CheckBox
提问于 2019-09-26 04:00:58
<form>
Age: <input type="checkbox" class="first" value="Below 10">Below 10
<input type="checkbox" class="first" value="Below 20"> Below 20
<input type="checkbox" class="first" value="Below 30">Below 30
<br>
You have clicked:
<span id="maClass">
</span>
</form>
<script type="text/javascript">
var maClass = document.querySelector("#maClass");
var first = document.querySelectorAll(".first");
var isClicked = false;
var i=0;
for(i; i<first.length ; i++){
first[i].addEventListener("click", function() {
if(isClicked){
maClass.style.display = "none";
isClicked = false;
}else{
maClass.style.display = "inline";
maClass.style.display = first[i].getAttribute("value");
isClicked = true;
}
});
}
</script>
我试着让这三个复选框切换。我在Javascript中使用了eventListener。我对3个不同的复选框使用了相同的类名。这是因为，它将帮助我将整个决策存储到一个数组中。但是它不工作，，我不能让它切换。请帮助
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-26 04:15:15
听起来，您想要做的是在单击复选框时更改<span id="maClass">的值。
如果你不想同时选择所有的单选按钮，你应该使用单选按钮。而且它可以有一个更简单的JS代码(例如，不需要保存isClicked或诸如此类的东西)。
以下是更新的代码：
<body>
<form>
Age: <input type="radio" name="first" class="first" value="Below 10">Below 10
<input type="radio" name="first" class="first" value="Below 20"> Below 20
<input type="radio" name="first" class="first" value="Below 30">Below 30
<br>
You have clicked:
<span id="maClass">
</span>
</form>
<script type="text/javascript">
var maClass = document.querySelector("#maClass");
var first = document.querySelectorAll(".first");
var i=0;
for(i; i<first.length ; i++){
first[i].addEventListener("click", function(e) {
maClass.innerHTML = e.target.value;
});
}
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58109385
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号