Как сложить два значения флажка вместе? - PullRequest
Новая
       2

Как сложить два значения флажка вместе?

0 голосов
/ 06 августа 2020

Допустим, у меня есть эти флажки: 

<head>
  <title>Title of the document</title>
</head>
<body>
  <ol>
    <li><input type="checkbox" id="1" value="1"> 1</p>
    <li><input type="checkbox" id="2" value="2"> 2</p>
    <li><input type="checkbox" id="3" value="3"> 3</p>
  </ol>
  <button type="button" class="check">Submit</button>

Как мне заставить, нажав кнопку отправки, добавить выбранные поля вместе? Например, если бы у меня были отмечены поля 1 и 3, как бы мне сложить их вместе, чтобы я мог печатать 4 или любую другую комбинацию чисел на экране?

1 Ответ

2 голосов
/ 06 августа 2020

Вы можете использовать селектор :checked, чтобы получить все отмеченные флажки, а затем l oop по всем из них, чтобы суммировать их значения. 

document.querySelector('button.check').addEventListener('click', function(e){
  const checked = document.querySelectorAll('ol input:checked');
  let sum = 0;
  checked.forEach(box => sum += +box.value);
  console.log(sum);
});
<ol>
  <li><input type="checkbox" id="1" value="1"> 1</p>
    <li><input type="checkbox" id="2" value="2"> 2</p>
      <li><input type="checkbox" id="3" value="3"> 3</p>
</ol>
<button type="button" class="check">Submit</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...