Tengo un problema para ver si la casilla de verificación ha sido marcada.
En particular, tengo una tabla con id, nombre y país y una columna adicional con una casilla de verificación. El propósito es devolver todos los ID de la casilla de verificación que se ha seleccionado. Pero lo que noto es que la instrucción if no parece funcionar.
¿Puedes ayudarme amablemente?
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> </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()" />Puede tomar todas las casillas de verificación marcadas y recorrerlas para obtener el texto en el siguiente elemento 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> </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()" />Puede consultar los elementos de la casilla de verificación marcada usando forEach() o un bucle for() y luego ir al tr más cercano del árbol dom usando el closest('tr') y obtener el contenido de texto del niño usando la clave que está configurada para su sección tr ID => ' 2 ', ya que ese es el tercer elemento td en su tr .
NOTAS: En su ejemplo, no definió la variable mytable que está pasando a su función.
En lugar de usar dos parentNodes para subir dos niveles, use .closest()
Dentro del ciclo, usando las teclas para obtener los niños adecuados:
td de su tabla sería .children[1]td de su tabla sería .children[2]td de su tabla sería .children[3]Si esto no es lo que está buscando, hágamelo saber y puedo actualizar o eliminar esta respuesta.
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> </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()" />