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.

</tr>
<?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></tr>\n”;
}
?>
</table>

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

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

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.

Ver esta entrada mejorada, demostración y descarga de archivos en:

www.antoniorios.net

Hasta pronto.

Junio 11, 2008 - Publicado por antoniorios | Cajas de chequeo, Javascript | | 2 comentarios

2 comentarios »

Hola oye de pura casualidad como lo puedo hacer pero con solo botones resulta que estoy creando dinamicamente mi tabla con botones y quiero que cuando le den clic al boton que es el de modificar me redireccione a otra pagina tomando los valores del id gracias por tu atencion

Comentario por patty | Agosto 20, 2008 | Responder
HOla Patty, eso es muy facil. solo debes… por al boton un atributo onClick=”location.href=’pagina.php?id=id;?>’” />

Algo asi, resultandote un redireccionamiento a es pagin, pasandole el id que generas en una consulta, en una clase. o simplemente algo que tu escribas….. SALUDOs

Comentario por ISaac | Septiembre 2, 2008 | Responder