如何检测和使用单选按钮取消选择

Posted 2023-05-08

【中文标题】如何检测和使用单选按钮取消选择

【英文标题】：How to detect and use a radio button deselect

【发布时间】：2019-09-11 09:48:56

【问题描述】：

我有一个基于积分系统的测验，每个单选按钮都存储在一个数组中，我正在循环遍历该数组。根据为每个问题选择的收音机，用户会根据该收音机的值获得一定数量的积分。问题是，如果用户改变主意并取消选择收音机/更改答案，我希望能够删除收音机的分数。

for (var i = 0; i < allRadios.length; i++) 
  allRadios[i].addEventListener('change', (e)=>
    let radio = e.target;
    if (radio.checked) 
      totalScoreMain = totalScoreMain + parseInt(radio.getAttribute('value'));
    
  );

【问题讨论】：

添加代码 sn-p 以获得更好的帮助。

如果radio.checked 为假，你想从totalScoreMain 中减去一些东西吗？

是的，从总分中减去，如果取消选择收音机，我想收回那些分数。

尝试else if (radio.checked == false)或else条件减值

查看这个答案：***.com/questions/8838648/…

【参考方案1】：

您可以简单地在change 函数中收集所有选中的单选按钮，然后计算这些选中的单选按钮的值：

var totalScoreMain = 0,
  allRadios = document.querySelectorAll('input[type="radio"]');
for (var i = 0; i < allRadios.length; i++) 
  allRadios[i].addEventListener('change', (e) => 
    totalScoreMain = 0;
    let checkedRadios = document.querySelectorAll('input[type="radio"]:checked');
    checkedRadios.forEach(function(checkedRadio) 
      totalScoreMain += parseInt(checkedRadio.getAttribute('value'));
    );
    console.log(totalScoreMain);
  );

<div>
  <input name='1_1' type="radio" value="10"> 10
  <input name='1_1' type="radio" value="20"> 20
</div>
<div>
  <input name='1_2' type="radio" value="30"> 30
  <input name='1_2' type="radio" value="40"> 40
  <input name='1_2' type="radio" value="50"> 50
</div>
<div>
  <input name='1_3' type="radio" value="35"> 35
  <input name='1_3' type="radio" value="45"> 45
  <input name='1_3' type="radio" value="25"> 25
</div>

【讨论】：

同样的问题，如果我取消选中收音机/更改答案，这仍然不会从总分中减去该值。

@09eric09 上面的例子运行良好。使用 html 发布您的实际代码

你是对的，我的错误，它工作正常。非常感谢您的帮助。

原来我在循环外声明了 totalScoreMain 变量，但没有将它包含在循环内。如果我将 totalScoreMain 变量从循环中取出，您是否介意详细说明为什么不减去该值？