如何在 Javascript 中循环遍历 HTML 表中的复选框行

Posted 2023-05-08

技术标签:

【中文标题】如何在 Javascript 中循环遍历 HTML 表中的复选框行【英文标题】：How to Loop Through Rows of Checkboxes in an HTML Table in Javascript 【发布时间】：2021-09-20 13:53:25 【问题描述】：

我有一个关于如何遍历表格中的复选框的问题。

我想要做的是在表格中的每行创建两个复选框以及一个下拉菜单。如果每行的两个复选框都被选中，我将在 javascript 中运行条件。如果连续选中两个复选框以及下拉菜单选项，我将运行条件。

所以我想遍历表格的每一行，检查是否选中了两个复选框。我认为另一种方法是使用 div 和类。我该怎么做？

我下面的示例代码不在表格中，但到目前为止，我只是为了让复选框和下拉菜单起作用。

<html>
<div class="container">
<input type="checkbox" class="checks" value ="Apple">Apple<br>
<input type="checkbox" class="checks" value ="BananaValue">Banana<br>
<input type="checkbox" class="checks" value ="Carrot">Carrot<br>

<form>
  Select your favorite fruit:
  <select id="mySelect" /*onchange="run();"*/>
    <option value="apple">apple</option>
    <option value="orange">Orange</option>
    <option value="pineapple">Pineapple</option>
    <option value="banana">Banana</option>
  </select>
</form>

<input type="submit" onclick="run()" />

<script>
function run() 
    var checks = document.getElementsByClassName('checks');
    var str = '';

    for (i = 0; i < 3; i++) 
        if (checks[i].checked === true) 
            str += checks[i].value + " ";
        
    

    alert(str);

</script>
</div>
</html>

【问题讨论】：

如果你能创建一个小提琴或codepen会很好。人们会更容易回答。任何人都可以将代码复制并粘贴到文本编辑器中并保存为 html。对不起，我没有把它放在我应该有的 html 表格格式中。我对此感到沮丧。没问题，但人们更容易帮助并激励人们真正尝试解决您的问题。很多人可能会因为复制示例所涉及的额外工作而忽略这一点。您的问题令人困惑。如果没有表格格式，3 个（不是 2 个）复选框中的哪一个将构成一行？您只显示了一个下拉菜单，那么每一行的其他下拉菜单是否相同？你能更好地定义问题吗？ 【参考方案1】：

更新：代码已更新以使用您评论中的信息。它只会在单击一个按钮时运行

原件：我注释掉了（但保留了）这个代码，以防你以后需要它。这是您想要的工作示例（我认为）。在 window.load 侦听器中，我们首先遍历所有行以查看是否有任何行准备好运行条件。然后我们在表格中的每个表单元素上设置change 监听器。侦听器侦听更改事件，然后运行我们的行检查。

/*
window.addEventListener('load', () => 
  document.querySelectorAll('.theTable tr').forEach(row => checkRow(row))

  document.querySelectorAll('.theTable td input[type=checkbox], .theTable td select').forEach(input => 
    input.addEventListener('change', e => checkRow(e.target.closest('tr')))
  )
)
*/

function run() 
  document.querySelectorAll('.theTable tr').forEach((row, i) => 
    let allChecked = row.querySelectorAll('input[type=checkbox]').length === row.querySelectorAll('input[type=checkbox]:checked').length

    if (allChecked && row.querySelectorAll('select option:checked').length > 0 && row.querySelector('select option:checked').value !== '') 
      console.log('run conditional on row index ', i)
    
  )

<input type="submit" onclick="run()" />

<table class='theTable'>
  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option selected value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>
    </form>
  </tr>

  <tr>
    <form>
      <td>
        <label> <input type="checkbox" class="checks" value="Apple">Apple </label>
        <label> <input type="checkbox" class="checks" value="BananaValue">Banana </label>
        <label> <input type="checkbox" class="checks" value="Carrot">Carrot </label>
      </td>
      <td>

        Select your favorite fruit:
        <select id="mySelect">
          <option value=""></option>
          <option value="apple">apple</option>
          <option value="orange">Orange</option>
          <option value="pineapple">Pineapple</option>
          <option value="banana">Banana</option>
        </select>
      </td>

    </form>
  </tr>


</table>

【讨论】：

哇。那很快。表格格式是我想要的。我花了一段时间才弄清楚这个示例代码。我希望在单击提交按钮时进行条件检查。我将在表格外的顶部有一个提交按钮。这回答了我关于连续多个复选框的问题。你击中了要害。非常感谢Kinglish。如有更多问题，我可能会与您联系。太棒了。如果这回答了您的问题，请考虑通过单击答案左侧的复选标记将其标记为解决方案。谢谢我将如何运行条件来检查每行第一列中的第一个复选框是否为空 Kinglish？【参考方案2】：

我对问题的初始条件的解读略有不同，因此，这可能不足以作为可接受的答案。

我读到每行只允许选择 2 种蔬菜。仅当满足 #1 条件时才添加选择的水果。

考虑到这一点，这是我提交的解决方案。


<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://***.com/questions/68329725/how-to-loop-through-rows-of-checkboxes-in-an-html-table-in-javascript -->
<title> Table Food Choices </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>

</style>

<body>
<form>
 <h3> From each row: </h3>
 <table id="tbl">
  <thead>
   <tr>
    <th colspan="3">Select 2 vetables</th>
    <th>And your favorite fruit:</th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
    <th>
     <select>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="grape">Grape</option>
      <option value="orange">Orange</option>
      <option value="peach">Peach</option>
      <option value="pineapple">Pineapple</option>
      <option value="tangerine">Tangerine</option>
     </select>
    </th>
   </tr>

   <tr>
    <td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
    <th>
     <select>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="grape">Grape</option>
      <option value="orange">Orange</option>
      <option value="peach">Peach</option>
      <option value="pineapple">Pineapple</option>
      <option value="tangerine">Tangerine</option>
     </select>
    </th>
   </tr>

   <tr>
    <td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
    <td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
    <th>
     <select>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="grape">Grape</option>
      <option value="orange">Orange</option>
      <option value="peach">Peach</option>
      <option value="pineapple">Pineapple</option>
      <option value="tangerine">Tangerine</option>
     </select>
    </th>
   </tr>
  </tbody>
 </table>
</form>

<input id="picks" type="submit" value="Submit choices">
<br>
Choices
<pre id='choices'></pre>

<script>
function run()
  var
      tblRows = document.querySelectorAll('tbody tr'),
      checks = document.querySelectorAll('.checks'),
      selects = document.querySelectorAll('select'),
      strs = [];                                       // console.log(tblRows.length, checks.length, selects.length);

  for (r = 0; r < tblRows.length; r++) 
    let cbCount = 0, tstr = '';
    for (cb=0; cb < 3; cb++) 
      if ( checks[(r*3)+cb].checked ) 
        cbCount++;
        tstr += checks[(r*3)+cb].value + ' ';
      
    
    if ( cbCount == 2 )  strs.push(tstr + " " + selects[r].value);   // accept only 2 checkbox with 1 select values
       
  document.getElementById('choices').textContent = strs.join('\n');

function init() 
  document.getElementById('picks').addEventListener('click', run);

init();
</script>
</body>
</html>

【讨论】：

以上是关于如何在 Javascript 中循环遍历 HTML 表中的复选框行的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Nightwatch 测试的自定义命令中添加嵌套函数 javascript - forEach - 循环遍历元素

在 HTML5 和 JavaScript 中循环访问 localStorage

如何以对象为成员循环遍历纯 JavaScript 对象

html 简单的Javascript循环遍历多个网页。这可以在电视上显示。

JS -javascript 数组遍历的几种方式，数组或对象循环遍历的对比分析，性能使用合理使用

我如何使用javascript循环遍历td中的表[关闭]