如何在下面的代码片段中计算带有"绿色"值的单选按钮?
<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>
使用 CSS 属性选择器,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>
使用 Document QuerySelector 属性尝试此操作,如 @wscourge 所述,这将记录选定的绿色和红色无线电
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>