|
Este script nos permitira seleccionar todos los CheckBox que contiene un formulario, es muy util para que el usuario no tenga que ir seleccionando uno por uno. antes que nada veamos un ejemplo de como se puede aplicar.
Supongamos que tenemos un formulario donde le pedimos al usuario que seleccione los temas que le interesan, si le interesan todos hace click en todos y listo!!! Se ahorra un par de clicks no? Veamos...
Bien, para el que no hizo click en "Todos" por favor hagalo asi ve el funcionamiento del script. Es muy simple armar este tipo de formularios, a continuacion le paso el codigo fuente del mismo...
<form name="form1" method="post" action="">
<table width="340" border="0" align="center" cellpadding="2" cellspacing="1">
<tr>
<td width="12" bgcolor="#E3E3E3"><input type="checkbox" name="checkbox" value="checkbox"> Musica</td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox2" value="checkbox"> Cine</td>
</tr>
<tr>
<td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox3" value="checkbox"> Television</td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox4" value="checkbox"> Teatro </td>
</tr>
<tr>
<td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox5" value="checkbox"> Tecnologia</td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox6" value="checkbox"> Entretenimiento</td>
</tr>
<tr>
<td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox7" value="checkbox"> Literatura</td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox8" value="checkbox"> Internet</td>
</tr>
<tr>
<td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox9" value="checkbox"> Video Juegos</td>
</tr>
<tr>
<td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox10" value="checkbox"> Turismo </td>
</tr>
<tr>
<td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);"> Todos</td>
</tr>
</table>
</form>
A destacar en este formulario es el ultimo checkbox que contiene la funcion JavaScript que selecciona a todos los demas...
<td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);"> Todos</td>
A continuacion les dejo el codigo de la funcion...
<script>
function ChequearTodos(chkbox)
{
for (var i=0;i < document.forms[0].elements.length;i++)
{
var elemento = document.forms[0].elements[i];
if (elemento.type == "checkbox")
{
elemento.checked = chkbox.checked
}
}
}
</script>
Este codigo pueden ubicarlo en cualquier parte de la pagina HTML, siempre recuerden agregar la etiqueta <script>. Sin mas les mando un saludo!
|