<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>我试图让这 3 个复选框切换。我在 Javascript 中使用了 eventListener。我对 3 个不同的复选框使用了相同的类名。这是因为，它将帮助我将整个决策存储到一个数组中。但它不起作用 我不能让它切换。请帮忙
1 回答
九州编程
TA贡献1785条经验 获得超4个赞
听起来您想要做的是更改<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>
添加回答
举报
0/150
提交
取消