LEER VARIOS CHECK TILDADOS Y RECUPERAR LOS VALORES DE TABLA
Leer TODOS los checkbox tildados por cÓdigo es importante cuando se generan por PHP
por ejemplo desde base de datos y debe hacerse una operacion sobre los registros de todos
los tildados.
En este caso por php le ponemos al id de cada checkbox el cid del registro por ejemplo y luego ejecutamos directo sobre el registro de la base de datos.
Ver bien la sintaxis de .clasedeloscheckbox:checked con la funcion embebida donde se ejecuta para CADA checkbox tildada.
Ver como se recupera id, nombre y valor de cada una.
En este caso por php le ponemos al id de cada checkbox el cid del registro por ejemplo y luego ejecutamos directo sobre el registro de la base de datos.
Ver bien la sintaxis de .clasedeloscheckbox:checked con la funcion embebida donde se ejecuta para CADA checkbox tildada.
Ver como se recupera id, nombre y valor de cada una.
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
$("#leer").click(function(evento){
$("#numero").html(""); // borro numero
$("#resultado").html(""); // borro numero
var n=0;
$('.test:checked').each(
function() {
n=n+1;
$("#resultado").append(this.id + ' ');
$("#resultado").append($(this).attr("name") + ' ');
$("#resultado").append($(this).val() + '<br>'); // escribo el id
}
);
$("#numero").html('Están tildados :' + n + ' checkbox'); // borro numero
}); // fin checkbox
});
</script>
<style>
table{
width:200px;
border-spacing:0px;
border: #000 solid 1px;
padding:none;
margin-top:20px;
margin-left: 20px;
}
td{
border: #000 solid 1px;
text-align: center;
padding-left: 5px;
}
#resultado{
margin-top:20px;
margin-left:20px;
float:left;
width:250px;
border:solid 1px #ccc;
height:120px;
padding-left:10px;
}
</style>
</head>
<body>
<div style="margin-top:50px;">
<div style="float: left ;">
<table>
<tr>
<td class="celdatitulo" style=" width:150px; height:20px;" >
ITEMS
</td>
<td class="celdatitulo" style="width:50px;">
ELEGIR
</td>
</tr>
<tr>
<td class="celdaP" >Item 1 </td>
<td class="celdaP">
<input class="test" type="checkbox" name="name1" id="id1" value="item 1" />
</td>
</tr>
<tr>
<td class="celdaP">Item 2 </td>
<td class="celdaP">
<input class="test" type="checkbox" name="name2" id="id2" value="item 2" />
</td>
</tr>
<tr>
<td class="celdaP">Item 3</td>
<td class="celdaP">
<input class="test" type="checkbox" name="name3" id="id3" value="item 3" />
</td>
</tr>
<tr>
<td class="celdaP">Item 4</td>
<td class="celdaP">
<input class="test" type="checkbox" name="name4" id="id4" value="item 4" />
</td>
</tr>
<tr>
<td class="celdaP">Item 5</td>
<td class="celdaP">
<input class="test" type="checkbox" name="name5" id="id5" value="item 5" />
</td>
</tr>
</table>
</div>
<div id="resultado" >
</div>
<div style="clear:both; "></div>
<div id="capa1" style="padding-top:30px;">
<input name="leer" type="button" value="LEER CHECKBOX" id="leer">
<span style="margin-left:10px;" id="numero"></span>
</div>
</div>
</body>