如何按值计算 HTML 单选输入元素?

平木图笠

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

<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>

卡蒂基扬吠陀

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

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何上传在 html 表单中输入的单选按钮值

来自分类Dev

HTML输入类型的单选值未返回正确的val()。length

来自分类Dev

如何获得输入单选元素以水平对齐?

来自分类Dev

如何在标签内的输入单选元素中添加样式?

来自分类Dev

如何获得固定宽度的输入单选元素(包括其文本)?

来自分类Dev

检查 html 输入元素值的 if 语句

来自分类Dev

如何根据用户的输入更改 html 元素的值?

来自分类Dev

如何强制输入html元素仅显示最后输入的字符

来自分类Dev

单击单选按钮时输入值的计算

来自分类Dev

按属性值对 html 元素进行分组

来自分类Dev

如何获得输入单选元素以在react [material-ui]中水平对齐?

来自分类Dev

如何使用HTML单选按钮输入(JS / jQuery)更改Highcharts图

来自分类Dev

使用jquery选择html表中输入元素的值

来自分类Dev

如何使用javascript中的所有其他输入类型计算单选输入值?

来自分类Dev

如何在HTML元素上获得最终的最终计算样式值?

来自分类Dev

您如何强制将重点放在HTML输入元素上?

来自分类Dev

如何使用Polymer重写本地HTML输入元素?

来自分类Dev

如何仅使用html获取输入元素的内容?

来自分类Dev

如何使用jQuery在输入元素html中查找文件

来自分类Dev

如何用Polymer重写本地HTML输入元素?

来自分类Dev

如何将ul元素传递给已经存在的html输入值?

来自分类Dev

如何设置HTML表单输入值,如果元素id,类名,其他属性未知?

来自分类Dev

如何在不更改输入值中的文本的同时删除 html 元素?

来自分类Dev

在for循环内检查单选输入(仅包含值的单选输入)

来自分类Dev

如何基于其父元素将单选列表的第一个输入设置为选中状态

来自分类Dev

如何基于其父元素将单选列表的第一个输入设置为选中状态

来自分类Dev

按数据属性值匹配/分组 HTML 元素

来自分类Dev

给定以下HTML和CSS,如何获取输入元素来填充其父元素的宽度?

来自分类Dev

用户输入后按值获取元素

Related 相关文章

  1. 1

    如何上传在 html 表单中输入的单选按钮值

  2. 2

    HTML输入类型的单选值未返回正确的val()。length

  3. 3

    如何获得输入单选元素以水平对齐?

  4. 4

    如何在标签内的输入单选元素中添加样式?

  5. 5

    如何获得固定宽度的输入单选元素(包括其文本)?

  6. 6

    检查 html 输入元素值的 if 语句

  7. 7

    如何根据用户的输入更改 html 元素的值?

  8. 8

    如何强制输入html元素仅显示最后输入的字符

  9. 9

    单击单选按钮时输入值的计算

  10. 10

    按属性值对 html 元素进行分组

  11. 11

    如何获得输入单选元素以在react [material-ui]中水平对齐?

  12. 12

    如何使用HTML单选按钮输入(JS / jQuery)更改Highcharts图

  13. 13

    使用jquery选择html表中输入元素的值

  14. 14

    如何使用javascript中的所有其他输入类型计算单选输入值?

  15. 15

    如何在HTML元素上获得最终的最终计算样式值?

  16. 16

    您如何强制将重点放在HTML输入元素上?

  17. 17

    如何使用Polymer重写本地HTML输入元素?

  18. 18

    如何仅使用html获取输入元素的内容?

  19. 19

    如何使用jQuery在输入元素html中查找文件

  20. 20

    如何用Polymer重写本地HTML输入元素?

  21. 21

    如何将ul元素传递给已经存在的html输入值?

  22. 22

    如何设置HTML表单输入值,如果元素id,类名,其他属性未知?

  23. 23

    如何在不更改输入值中的文本的同时删除 html 元素?

  24. 24

    在for循环内检查单选输入(仅包含值的单选输入)

  25. 25

    如何基于其父元素将单选列表的第一个输入设置为选中状态

  26. 26

    如何基于其父元素将单选列表的第一个输入设置为选中状态

  27. 27

    按数据属性值匹配/分组 HTML 元素

  28. 28

    给定以下HTML和CSS,如何获取输入元素来填充其父元素的宽度?

  29. 29

    用户输入后按值获取元素

热门标签

归档