每次检查单选按钮时添加到变量？

Posted 2023-03-27

【中文标题】每次检查单选按钮时添加到变量？

【英文标题】：Add to a variable each time a radio btn is checked?

【发布时间】：2020-11-21 09:36:10

【问题描述】：

我有 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>

【问题讨论】：

你这里有错字<button id="btn" oncick="check()">Click</button>应该是onclick

不能使用 1,2,3 作为变量。你的浏览器控制台必须用VM1036:1 Uncaught SyntaxError: Unexpected number

之类的东西对你大喊大叫

【参考方案1】：

您可以获得选中的单选按钮的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>

【参考方案2】：

为什么不这样做，

document.querySelectorAll("#1, #2").forEach(e => e.addEventListener('change', (checked, id) => 
  if(checked) 
    if(id === "1") countA++
    else if(id === "2") countB++
  
));

【讨论】：

我不能投反对票，但也许因为这使用了 jQuery

不，不是吗？

哦，对不起。我只是假设，因为我看到了 querySelector。我对这一切都不熟悉！