时间戳

首页 > 解决方案 > 每次检查无线电 btn 时添加到变量？

javascript - 每次检查无线电 btn 时添加到变量？

问题描述

我有 2 个变量和 3 个无线电 btns。每次检查无线电时，我希望将 1 添加到 2 个变量之一（如果是无线电 #1 或 #3，则应将其添加到 var countA，否则应添加到 countB）。我只想使用 Javascript（不是 jQuery）并且我的代码一定有问题，因为当我单击按钮时，段落不会将其内部 HTML 更改为 countA 和 countB 的值。JAVASCRIPT：

var countA = 0
            var countB = 0
            function check() {
                var 1 = document.getElementById("1").checked
                var 2 = document.getElementById("2").checked
                var 3 = document.getElementById("3").checked
                var radios = document.getElementsByTagName("input")
                
                for (var i=0; i<radios.length; i++) {
                
                if (1 == true) {
                    countA++
                }
                if (2 == true) {
                    countB++
                }
                if (3 == true) {
                    countA++
                }
                }
            document.getElementById("p").innerHTML = countA
            document.getElementById("p2").innerHTML = countB
            
            }

HTML：

<input type = "radio" id="1" class="a">
        <input type="radio" id="2" class="b">
        <input type="radio" id="3" class="a"><br>
        CountA: <p id="p"></p>
        CountB: <p id="p2"></p><br>
        <button id="btn" oncick="check()">Click</button>

标签： javascriptvariablesinputaddradio

解决方案

您可以获得id被选中的单选按钮并根据它增加计数的值。此外，您还没有给name单选按钮提供它们，因此一次只能单击一个按钮。

演示代码：

var countA = 0
var countB = 0

function check() {
//getting length
  var radios = document.getElementsByTagName('input').length
 var selctor=document.getElementsByTagName('input');
  for (var i = 0; i < radios; i++) {
  //checking if radio is checked
   if (selctor[i].checked) {
   console.log("id-->"+selctor[i].getAttribute('id'))
   //checking id 
    if (selctor[i].getAttribute('id') == 1 || selctor[i].getAttribute('id') == 3) {
      countA++
    }
    if (selctor[i].getAttribute('id') == 2) {
      countB++
    }
   
    }
  }
  document.getElementById("p").innerHTML = countA
  document.getElementById("p2").innerHTML = countB

}
<input type="radio" id="1" class="a" name="radio" >
<input type="radio" id="2" class="b" name="radio">
<input type="radio" id="3" class="a" name="radio"><br> CountA:
<p id="p"></p>
CountB:
<p id="p2"></p><br>
<button id="btn" onclick="check()">Click</button>

推荐阅读