复选框如果选中则不起作用

Question

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

特别是，我有一个带有id、名称和国家的表，还有一个带有复选框的附加列。其目的是返回已选中复选框的所有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()循环查询复选框元素，然后使用closest('tr')转到dom树上最近的tr，并使用为您的trID节设置的键获取子项的textContent2'，因为这是tr中的第三个td元素。

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

与其使用两个parentNodes来获得两个级别，不如使用.closest((

在循环中，使用密钥获得合适的子项：

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

如果这是而不是，请告诉我，我可以更新或删除此答案。

function GetSelected() {
let checks = document.querySelectorAll('#my-table td input[type="checkbox"]:checked');
checks.forEach(cb => 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()" />