切换复选框
[英]Toggling CheckBox
问题描述
<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 个不同的复选框使用了相同的 class 名称。 这是因为，它将帮助我将整个决策存储到一个数组中。 但它不起作用我不能让它切换。 请帮忙
1 个解决方案
解决方案1
0 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>
自定义复选框不切换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.