如何对勾选的 RadioButtons 求和答案

【问题标题】：How to sum ticked RadioButtons如何对勾选的 RadioButtons 求和
【发布时间】：2021-05-22 06:20:50
【问题描述】：

我想总结清单中勾选的“是/否”单选按钮。所以，这取决于我是否应该点击“是”或“否”来计算总和。

到目前为止，这是我的代码。不幸的是，总和不显示。

function checkTicked() {
  var form = document.getElementById("selected");
  let sum = 0;
  for (j = 0; j < form.length; j++) {
    if (form[j].checked == true) {
      sum = sum + 1;
    }
  }
  document.getElementById("summe").value = sum;
}

<form name="liste"></form>
<table>
  <tbody>
    <tr>
      <th>Question</th>
      <th>Answer</th>
    </tr>
    <tr>
      <td>Trifft A zu?</td>
      <td>
        <div>
          <label>
    <input type="radio" name="choice0" id="selected" onchange="checkTicked()">
    Ja
  </label>
          <label>
    <input type="radio" name="choice0" onchange="checkTicked()">
    Nein
  </label>
        </div>
      </td>
    </tr>
    <tr>
      <td>Trifft B zu?</td>
      <td>
        <div>
          <label>
    <input type="radio" name="choice1" id="selected" onchange="checkTicked()">
    Ja
  </label>
          <label>
    <input type="radio" name="choice1" onchange="checkTicked()">
    Nein
  </label>
        </div>
      </td>
    </tr>

    <tr>
      <td colspan="2" ; style="text-align:right;"><b>Summe</b></td>
      <td><input type="text" size="3" name="summe1" id="summe" value="0"></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： javascript html html-table sum radio-button

【解决方案1】：

你遇到了一些问题

过早关闭表单
错过了<table>
不是唯一的 ID
你在 for 循环中有一个 int 而不是 let 或 var

要修复您的代码，您可以这样做

function checkTicked() {
  var radios = document.querySelectorAll("input[type=radio]:checked");
  let sum = 0;
  for (let i = 0; i < radios.length; i++) {
    if (radios[i].closest("label").innerText.trim() === "Ja") {
      sum += 1;
    }
  }
  document.getElementById("summe").value = sum;
}

但我建议委托和更简单的脚本，其中包含有关收音机本身的更多信息：

我从表单委托而不是添加内联事件处理程序

如果您只想要 JA，您可以从表单中删除 summeNEIN 和第二个计数

document.getElementById("liste").addEventListener("input", function(e) {
  document.getElementById("summeJA").value = this.querySelectorAll("input[value=ja]:checked").length
  document.getElementById("summeNEIN").value = this.querySelectorAll("input[value=nein]:checked").length
})

<form id="liste">
<table>
  <tbody>
    <tr>
      <th>Question</th>
      <th>Answer</th>
    </tr>
    <tr>
      <td>Trifft A zu?</td>
      <td>
        <div>
          <label> <input type="radio" name="choice0" value="ja">Ja</label>
          <label><input type="radio" name="choice0" value="nein">Nein</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>Trifft B zu?</td>
      <td>
        <div>
          <label><input type="radio" name="choice1" value="ja">Ja</label>
          <label><input type="radio" name="choice1" value="nein">Nein</label>
        </div>
      </td>
    </tr>

    <tr>
      <td colspan="2" ; style="text-align:right;"><b>Summe JA</b></td>
      <td><input type="text" size="3" name="summeJA" id="summeJA" value="0"></td>
    </tr>
    <tr>
      <td colspan="2" ; style="text-align:right;"><b>Summe NEIN</b></td>
      <td><input type="text" size="3" name="summeNEIN" id="summeNEIN" value="0"></td>
    </tr>
  </tbody>
</table>
</form>

【讨论】：