Блог

Главная - Вопросы по программированию - Как суммировать отмеченные галочкой радиокнопки

Как суммировать отмеченные галочкой радиокнопки

#javascript #html #html-table #sum #radio-button

#javascript #HTML #html-таблица #сумма #переключатель-кнопка

Вопрос:

я хотел бы суммировать отмеченные галочкой радиокнопки «Да / Нет» из моего контрольного списка. Таким образом, зависит от того, нажму ли я на «Да» или «Нет», если это должно быть подсчитано до суммы.

Пока это мой код. К сожалению, сумма не отображается.

 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>

Ответ №1:

У вас были некоторые проблемы

  • закрыл форму слишком рано
  • пропустил <table>
  • не уникальные идентификаторы
  • у вас было int вместо let или var в цикле for

Чтобы исправить СВОЙ код, вы можете сделать

 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;
}

Но я предлагаю делегирование и более простой сценарий с дополнительной информацией о самом радио:

Я делегирую из формы вместо добавления встроенных обработчиков событий

Вы можете удалить summeNEIN из формы и второго счета, если вам нужен только JA

 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>