Selección de cajas de chequeo en una tabla
Si observamos en la mayoría de correos, catálogos de productos u otros temas de igual idea que cuando muestran los mensajes o información, vemos en el título de la tabla contenedora que existe una caja de chequeo (checkbox) que al seleccionarla nos permite seleccionar todos los elementos de la tabla y evitarnos el trabajo de hacerlo de uno en uno.
Este es uno de los primeros scripts que hice referente a este tema, espero te sirva y si encontraras en internet algo con esta idea que pueda mejorar mi script házmelo saber y asi ofrecer algo mejor.
Empecemos creando nuestro script.
cajachequeo.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Selección de cajas de chequeos</title> </head> <body> <form name="f1"> <table border="1" width="25%"> <tr> <th align="center"><input type="checkbox" name="todo"/></th> <th>Cod</th> <th>Departamento</th> </tr> </table> </form> </body> </html>
Hemos creado un formulario y una tabla para mostrar todos los departamentos de una tabla, en la etiqueta th de la tabla colocamos la caja de chequeo que hará toda la idea de este post.
Cargamos la tabla con los departamentos.
< ?php
$cn=mysql_connect("localhost","usuario","clave");
mysql_select_db("bd_anidados");
$sql="SELECT * FROM departamento";
$rs=mysql_query($sql);
while ($reg=mysql_fetch_assoc($rs)) { // departamentos
$cd=$reg['coddep']; // código departamento
$dd=$reg['desdep']; // descripción departamento
echo "<tr><td align='center'><input type='checkbox' name='ch[$cd]'/></td>";
echo "<td align='center'>$cd</td>";
echo "<td>$dd</td>\n";
}
?>
Acá estamos realizando la conexión a la base de datos y la consulta de la tabla, la recorremos llenando la tabla colocando en la primera celda de cada fila la caja de chequo de la fila, para el nombre de la caja he considerado como arreglo al ser la mejor forma de procesarlo posteriormente.
El cambio de las cajas de chequeo de la tabla la realizaremos con JavaScript, la función es:
<title>Selección de caja de chequeos</title>
<script language="JavaScript" type="text/javascript">
function cambiaChkBox() {
var nEle = document.f1.elements.length;
for (i=0; i<nele ; i++) {
if (document.f1.elements[i].type=="checkbox"
document.f1.elements[i].name.lastIndexOf('ch')!=-1 ) {
document.f1.elements[i].checked ? document.f1.elements[i].checked=false : document.f1.elements[i].checked=true;
}
}
}
</script>
Agregamos el evento onclick a la caja de chequeo del título de la tabla para cuando presiones cambien las demás cajas de chequeo
<th align="center"><input type="checkbox" name="todo" onclick="cambiaChkBox()" /></th>
Finalmente algo de color
<title>Selección de caja de chequeos</title> <link rel="StyleSheet" href="estilo.css" type="text/css"> <script language="JavaScript" type="text/javascript">
El código del CSS que lo vimos en ejemplos anteriores es:
estilo.css
td {
background-color: #FFFFCC;
color: #000066;
}
th {
background-color: #000099;
color: #FFFFFF;
font-weight: bold;
}
Esta idea lo uso siempre para eliminar los registros seleccionados, este es uno de los sitios que mejor idea dan de como procesar las cajas de chequeo en PHP, más adelante espero poder explicarlo con un ejemplo.
Hasta pronto.
this post is very usefull thx!
me encanto me sirvo para una tareita… la proxima mas largito please