如何檢查在javascript中單擊了多少個按鈕？

Question

我正在嘗試使用 html 單選按鈕制作出勤頁面。 因此，當我提交它時，我希望它返回檢查了多少個標題為存在的單選按鈕以及多少個標題為不存在的單選按鈕 ae 檢查。

額外信息：我使用 Mac OS X El Capitan、Bootstrap 和 tomcat 作為本地主機和 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>

Answer 1

使用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>