HTML

Question

我正在尝试使用html单选按钮制作出勤页面。因此，当我提交它时，我希望它返回检查有多少个带有标题的单选按钮，以及检查有多少个没有标题的单选按钮。

其他信息：我将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>

如何检查在javascript中单击了多少按钮？

HTML

1 个答案: