Skip to main content
título editado
Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Como ¿Cómo marcar checkboxes como checked al coincidir valor de una fila seleccionada con javasecriptJavascript?

se añadieron 131 caracteres en el cuerpo
Origen Enlace
Bender Paisa
  • 12.5k
  • 4
  • 28
  • 42
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>

Y este es el JavaScript:

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

Y este es el JavaScript:

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;
            };  
        }

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>
 

Origen Enlace

Como marcar checkboxes como checked al coincidir valor de una fila seleccionada con javasecript?

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:

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>

Y este es el JavaScript:

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;
            };  
        }

Aquí para ver el ejemplo: https://jsfiddle.net/einnerlink/sxvy3hbd/