Cómo hago para que al hacer clic sobre las filas de una tabla, los valores que ésta contiene en sus columnas marquen los checkboxes correnpondientes como checked.
El mi ejemplo, cuando todas las colunmas tienen info los checkboxes se marcan sin problema, pero cuando en algunos de ellos no hay sólo se marca el primero si es que tiene info, de lo contrario ninguno lo hace.
Este es el html que que contiene los inputs tipo checkbox y la tabla:
var tabla = document.getElementById('lista'),rIndex;
for (var i = 1; i < tabla.rows.length; i++){
tabla.rows[i].onclick = function(){
rIndex = this.rowsIndex;
for (var i = 0, len = document.getElementsByTagName("input").length; i < len; i++) {
document.getElementsByTagName("input")[i].checked = false;
}
document.getElementById("h_" + this.cells[4].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("h_" + this.cells[5].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("h_" + this.cells[6].innerHTML.trim().toLowerCase()).checked = true;
document.getElementById("h_" + this.cells[7].innerHTML.trim().toLowerCase()).checked = true;
};
}
Habilidades:<br>
<input type="checkbox" name="h1" id="h_html" value="html"> HTML
<input type="checkbox" name="h2" id="h_js" value="js"> JS
<input type="checkbox" name="h3" id="h_php" value="php"> PHP
<input type="checkbox" name="h4" id="h_java" value="java"> JAVA<br>
<input type="reset" value="Reset">
<br>
<table id="lista">
<thead>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
<th>Género</th>
<th> Skill-1 </th>
<th> Skill-2 </th>
<th> Skill-2 </th>
<th> Skill-3 </th>
</thead>
<tbody>
<tr>
<td>Carlos</td>
<td>Smith</td>
<td>28</td>
<td>m</td>
<td>html</td>
<td></td>
<td>php</td>
<td></td>
</tr>
<tr>
<td>Ana</td>
<td>Snow</td>
<td>23</td>
<td>f</td>
<td></td>
<td>js</td>
<td></td>
<td>java</td>
</tr>
<tr>
<td>Tomas</td>
<td>Lopez</td>
<td>19</td>
<td>m</td>
<td>html</td>
<td>js</td>
<td>php</td>
<td>java</td>
</tbody>
</table>
Aquí para ver el ejemplo: https://jsfiddle.net/einnerlink/sxvy3hbd/