javascript - 如何按值计算 HTML 单选输入元素？

Question

如何计算下面代码片段中具有“绿色”值的单选按钮？

<tr id="1">
  <td style="color : blue;"><b>President Staff</b></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan1"  value="green" onClick="green('1')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan1"  value="red" onClick="red('1')" required></td>
</tr>

<tr id="2">
  <td>Corporate Planning & Program Office</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan2"  value="green" onClick="green('2')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan2"  value="red" onClick="red('2')"required></td>
</tr>

<tr id="3">
  <td>Acquisitiom & Aircraft Management</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan3"  value="green" onClick="green('3')"required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan3"  value="red" onClick="red('3')"required></td>
</tr>

<tr id="4">
  <td>Corporate Quality, Safety & Environmentak Management</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan4"  value="green" onClick="green('4')"required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan4"  value="red" onClick="red('4')" required></td>
</tr>

<tr id="5">
  <td>Corporate Secretary</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan5"  value="green" onClick="green('5')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan5"  value="red" onClick="red('5')" required></td>
</tr>

<tr id="6">
  <td>Internal Audit</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan6"  value="green" onClick="green('6')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan6"  value="red" onClick="red('7')" required></td>
</tr>

Answer 1

使用 CSS attribute selector , input[value="green"], 使用 .querySelectorAll() 获取所有这些。它将生成一个数组，因此您可以读取其 length 属性。

更具体地说，您也可以将它与[type="radio"]结合使用:

input[type="radio"][value="green"]

---

更新:

根据要求，仅选择选中，使用 CSS :checked

input[value="green"][type="radio"]:checked

console.log(document.querySelectorAll('input[value="green"][type="radio"]:checked').length)

<tr id="1">
  <td style="color : blue;"><b>President Staff</b></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan1"  value="green" onClick="green('1')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan1"  value="red" onClick="red('1')" required></td>
</tr>

<tr id="2">
  <td>Corporate Planning & Program Office</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan2"  value="green" onClick="green('2')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan2"  value="red" onClick="red('2')"required></td>
</tr>

<tr id="3">
  <td>Acquisitiom & Aircraft Management</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan3"  value="green" onClick="green('3')"required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan3"  value="red" onClick="red('3')"required></td>
</tr>

<tr id="4">
  <td>Corporate Quality, Safety & Environmentak Management</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan4"  value="green" onClick="green('4')"required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan4"  value="red" onClick="red('4')" required></td>
</tr>

<tr id="5">
  <td>Corporate Secretary</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan5"  value="green" onClick="green('5')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan5"  value="red" onClick="red('5')" required></td>
</tr>

<tr id="6">
  <td>Internal Audit</td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan6"  value="green" onClick="green('6')" required></td>
  <td class="text-center" style="padding-left:40px;"><input type="radio" class="form-check-input" name="jabatan6"  value="red" onClick="red('7')" required></td>
</tr>