如何在javascript中循环遍历html表中的复选框行

eoxn13cs  于 2021-09-23  发布在  Java
关注(0)|答案(2)|浏览(417)

我有一个关于如何在表中的复选框中循环的问题。
我想做的是在一个表中的每行创建两个复选框,以及一个下拉菜单。如果选中了每行的两个复选框,我将在javascript中运行一个条件。如果一行中的两个复选框都与下拉菜单选项一起被选中,我将运行一个条件菜单。
所以我想循环检查表的每一行,检查是否选中了这两个复选框。我认为另一种方法是使用div和class。我该怎么做?
下面的示例代码不在表中,但到目前为止,我只是为了让复选框和下拉菜单正常工作。

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

imzjd6km1#

更新:代码将被更新以处理您的评论中的信息。它将仅在单击一个按钮时运行
奥利格:我注解掉了(但保留了)代码,以备以后需要。这里有一个你想要的工作示例(我想)。在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>
mutmk8jj

mutmk8jj2#

我对问题的初始条件的理解略有不同,因此这可能不足以作为可接受的答案。
我读到,每排只允许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://stackoverflow.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>

相关问题