How to count HTML radio input elements by their value?

Question

How to count radio buttons with "green" values in my code snippet below?

<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

Try this using Document QuerySelector attribute as mentioned by @wscourge, This will log selected Green and Red Radios

window.addEventListener("load", function() {
  var radioOption = document.querySelectorAll('input[type=radio][name^="jabatan"]');
  radioOption.forEach(function(e) {
    e.addEventListener("click", function() {
      console.clear();
      console.log('Green : ' + document.querySelectorAll('input[type=radio][value="green"]:checked').length + '\nRed : ' + document.querySelectorAll('input[type=radio][value="red"]:checked').length);
    });
  });
});

<table>
  <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>
</table>
<script>
  function green(i) {}

  function red(i) {}
</script>

Answer 2

Using CSS attribute selector, input[value="green"], get all those with .querySelectorAll(). It will result in an array, so you can read its length property.

To be more specific, you can combine it with [type="radio"] too:

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

---

UPDATED:

As requested, to select checked only, use 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>