如何总结勾选的单选按钮

如何解决如何总结勾选的单选按钮

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

这是我目前的代码。不幸的是，总和没有显示。

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>

解决方法

你遇到了一些问题

• 过早关闭表单
• 错过了<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>