复选框检查是否被选中不起作用

Question

我在查看复选框是否已选中时遇到问题。

特别是，我有一个带有 id、name 和 country 的表以及一个带有复选框的附加列。 目的是返回已选中复选框的所有 id。 但我注意到 if 语句似乎不起作用。

你能帮帮我吗？

 function GetSelected() { var table = document.getElementById(mytable); var rowCount = table.rows.length; console.log(rowCount) for (var i = 1; i < rowCount; i++) { var row = table.rows[i]; var chkbox = table.getElementsByTagName("INPUT"); if (chkbox[i].checked) { var row = checkBoxes[i].parentNode.parentNode; id_art += row.cells[0].innerHTML; console.log(id_art); } } }

 <table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;"> <tr> <th>&nbsp;</th> <th style="width:80px">Check</th> <th style="width:80px">Id</th> <th style="width:120px">Name</th> <th style="width:120px">Country</th> </tr> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>John Hammond</td> <td>United States</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>Mudassar Khan</td> <td>India</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>Suzanne Mathews</td> <td>France</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>Robert Schidner</td> <td>Russia</td> </tr> </table> <br /> <input type="button" value="Get Id Selected" onclick="GetSelected()" />

Answer 1

您可以抓住所有选中的复选框并循环它们以获取下一个 td 元素中的文本。

 function getSelected() { var cbs = document.querySelectorAll('#my-table input[type="checkbox"]:checked'); console.log(cbs.length); const ids = Array.from(cbs).map(cb => cb.closest('td').nextElementSibling.textContent); console.log(ids); }

 <table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;"> <tr> <th>&nbsp;</th> <th style="width:80px">Check</th> <th style="width:80px">Id</th> <th style="width:120px">Name</th> <th style="width:120px">Country</th> </tr> <tr> <td><input type="checkbox" /></td> <td>1</td> <td>John Hammond</td> <td>United States</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>Mudassar Khan</td> <td>India</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>Suzanne Mathews</td> <td>France</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>Robert Schidner</td> <td>Russia</td> </tr> </table> <br /> <input type="button" value="Get Id Selected" onclick="getSelected()" />

Answer 2

您可以使用forEach()或for()循环查询复选框元素，然后使用条件来查看该元素是否已检查 => if(cb.checked) 。 如果它被选中 => el.checked ，那么 go 使用最接近 dom 树的最接近的tr closest('tr')并使用为您的tr ID部分设置的键获取子的 textContent =>' 2 ' ，因为这是tr中的第三个td元素。

注意：在您的示例中，您没有定义要传递到 function 的变量mytable 。

使用.closest()而不是使用两个 parentNodes 来获得两个级别

在循环中，使用键来获取正确的孩子：

• 检查表的td部分将是.children[1]
• 您表的td部分将是.children .children[2]
• 表的名称td部分将是.children[3]

如果这不是您要查找的内容，请告诉我，我可以更新或删除此答案。

 let checks = document.querySelectorAll('#my-table td input'); function GetSelected() { checks.forEach(cb => { if(cb.checked){ console.log(cb.closest('tr').children[2].textContent) } }) }

 <table cellspacing="0" rules="all" border="1" id="my-table" style="border-collapse: collapse;"> <tr> <th>&nbsp;</th> <th style="width:80px">Check</th> <th style="width:80px">Id</th> <th style="width:120px">Name</th> <th style="width:120px">Country</th> </tr> <tr data-id="1"> <td><input type="checkbox" /></td> <td>1</td> <td>John Hammond</td> <td>United States</td> </tr> <tr> <td><input type="checkbox" /></td> <td>2</td> <td>Mudassar Khan</td> <td>India</td> </tr> <tr> <td><input type="checkbox" /></td> <td>3</td> <td>Suzanne Mathews</td> <td>France</td> </tr> <tr> <td><input type="checkbox" /></td> <td>4</td> <td>Robert Schidner</td> <td>Russia</td> </tr> </table> <br /> <input type="button" value="Get Selected" onclick="GetSelected()" />