Как проверить, сколько кнопок было нажато в javascript? - PullRequest
Новая
       20

Как проверить, сколько кнопок было нажато в javascript?

0 голосов
/ 01 июля 2019

Я пытаюсь сделать страницу посещаемости с помощью html-кнопок.Поэтому, когда я отправляю его, я хочу, чтобы он возвращал, сколько радио-кнопок с заголовком как присутствующее проверено и сколько радио-кнопок с заголовком как отсутствующим и проверено.

Дополнительная информация: я использую Mac OSX El Capitan, Bootstrap и tomcat для localhost и java для поддержки бэкэнда

Пожалуйста, предлагайте ответы только с javascript

HTML 

<label>Present<input type="radio" name="optradio" class="radiobtn" onclick =" // please help "></label>

<label>Absent<input type="radio" name="optradio" class="radiobtn" onclick =" // please help "></label>

1 Ответ

1 голос
/ 01 июля 2019

Используйте querySelectorAll('.present:checked'), чтобы выбрать все элементы, которые проверены и имеют присутствующий класс.Затем вы можете получить длину возвращенного списка узлов. 

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault()
  let present = document.querySelectorAll('.present:checked').length
  let absent = document.querySelectorAll('.absent:checked').length
  
  console.clear()
  console.log('present:', present)
  console.log('absent:', absent)
})
table {
  width: 100%;
}
<form>
  <table>
    <tr>
      <td>Billy</td>
      <td><label>Present<input type="radio" name="optradio[1]" class="radiobtn present"></label></td>
      <td><label>Absent<input type="radio" name="optradio[1]" class="radiobtn absent"></label></td>
    </tr>
    <tr>
      <td>Bobby</td>
      <td><label>Present<input type="radio" name="optradio[2]" class="radiobtn present"></label></td>
      <td><label>Absent<input type="radio" name="optradio[2]" class="radiobtn absent"></label></td>
    </tr>
    <tr>
      <td>Joey</td>
      <td><label>Present<input type="radio" name="optradio[3]" class="radiobtn present"></label></td>
      <td><label>Absent<input type="radio" name="optradio[3]" class="radiobtn absent"></label></td>
    </tr>
    <tr>
      <td>Samantha</td>
      <td><label>Present<input type="radio" name="optradio[4]" class="radiobtn present"></label></td>
      <td><label>Absent<input type="radio" name="optradio[4]" class="radiobtn absent"></label></td>
    </tr>
  </table>
  <p>
    <input type="submit" value="Submit">
  </p>
</form>
...