如何按其值计算HTML无线电输入元素?

时间:2018-03-22 05:10:07

标签: javascript html css html5 css3

如何使用"绿色"来计算单选按钮的数量我的代码段中的值是多少?



{{1}}




2 个答案:

答案 0 :(得分:2)

使用CSS attribute selectorinput[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>

答案 1 :(得分:0)

使用@wscourge提到的Document QuerySelector属性尝试此操作, 这将记录选定的绿色和红色无线电

&#13;
&#13;
location /apis/master/ {
    # Reroutes /apis/master/* to /apis/FreeTierSmall/master/* correctly!
    proxy_pass http://localhost:80/apis/FreeTierSmall/master/;
}
&#13;
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);
    });
  });
});
&#13;
&#13;
&#13;