Marcar varios checkbox simultaneamente

khepper · #1 (**permalink**) 03/10/2004, 08:39

Basicamente tengo un formulario dividido en 4 partes, cada parte tiene varios checkbox (10-12 cada uno) y quiero poner uno que me sirva para seleccionar todos los que pertenecen a la misma seccion, pero que al marcarlo en el formulario se marquen/desmarquen todos

caricatos · #2 (**permalink**) 03/10/2004, 08:50

Hola khepper:

Fíjate si esta respuesta que dí en el foro javascript a una pregunta parecida te puede valer: http://www.forosdelweb.com/f13/como-deshabilitar-formualrio-235985/

Me olvidaba decir que en vez de "disabled" hay que usar "checked"

Saludos

khepper · #3 (**permalink**) 03/10/2004, 15:17

Gracias por contestar, pero no lo he entendido...

O me explicas el código o me echas otra mano.
mi formulario es tal que así

Parte 1
<input name="11" type="checkbox"> modulo 1 <br>
<input name="12" type="checkbox"> modulo 2 <br>
<input name="13" type="checkbox"> modulo 3 <br>
<input name="14" type="checkbox"> modulo 4 <br>
<input name="15" type="checkbox"> modulo 5 <br>
<input name="1T" type="checkbox"> Todos <br>
Parte 2
<input name="21" type="checkbox"> modulo 1 <br>
<input name="22" type="checkbox"> modulo 2 <br>
<input name="23" type="checkbox"> modulo 3 <br>
<input name="24" type="checkbox"> modulo 4 <br>
<input name="25" type="checkbox"> modulo 5 <br>
<input name="2T" type="checkbox"> Todos <br>
......
La idea es que al pulsar en todos se me marquen todos los que pertenecen a cada parte. No se mucho de javascript, el formulario lo creo con php pero es evidente que esto debe ejecutarse de lado del cliente
Muchas grácias de nuevo por ayudarme

caricatos · #4 (**permalink**) 03/10/2004, 17:29

Hola otra vez:

Al poner nombres empezados por un número no funcionaba bien, pero le puse una letra por delante y se arreglo:

Con tu ejemplo:

<html>
<head>
<script >
function grupo(cual, estado) {
for (var i = 1; i < 6; i ++)
document["forms"]["prueba"][cual + i]["checked"] = estado;
}
</script >
</head>
<body>
</body>
<form name="prueba" >
<input name="g11" type="checkbox"> modulo 1 <br>
<input name="g12" type="checkbox"> modulo 2 <br>
<input name="g13" type="checkbox"> modulo 3 <br>
<input name="g14" type="checkbox"> modulo 4 <br>
<input name="g15" type="checkbox"> modulo 5 <br>
<input name="g1T" type="checkbox"onclick="grupo('g1', this.checked)"> Todos <br>
Parte 2<br />
<input name="g21" type="checkbox"> modulo 1 <br>
<input name="g22" type="checkbox"> modulo 2 <br>
<input name="g23" type="checkbox"> modulo 3 <br>
<input name="g24" type="checkbox"> modulo 4 <br>
<input name="g25" type="checkbox"> modulo 5 <br>
<input name="g2T" type="checkbox" onclick="grupo('g2', this.checked)"> Todos <br>
<form>
</html>

Saludos

JavierB · #5 (**permalink**) 04/10/2004, 09:20

Hola khepper y caricatos.

Otra forma de hacerlo, jugando con el DOM:

Código HTML:

<html>
<head>
<script>
function marcar(obj,chk) {
	elem=obj.getElementsByTagName('input');
  for(i=0;i<elem.length;i++)
  	elem[i].checked=chk.checked;
}
</script>
</head>
<body>
<form>
<div>
<input type="checkbox" onclick="marcar(this.parentNode,this)" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<div>
<input type="checkbox" onclick="marcar(this.parentNode,this)" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
<form>
</body>
</html>

Saludos,

khepper · #6 (**permalink**) 06/10/2004, 15:14

Muchisimas gracias a los dos, eso era lo que andaba buscando

jorge_nieves · #7 (**permalink**) 01/02/2006, 05:20

No he podido hacer funcionar el ejemplo de JavierB, he intentado quitando los name de los input checkbox y tampoco funciona, aqui dejo mi codigo por si alguien sabe lo que le ocurre a mi script.

Código HTML:

<script>
function marcar(obj,chk) {
	elem=obj.getElementsByTagName('input');
  for(i=0;i<elem.length;i++)
  	elem[i].checked=chk.checked;
}
</script>		
			<form name='permisos' action="?act=3" method="post"><table border="1" width="100%">
			<TR>
				<TD>Nombre:</TD><td><input type='text' name='nombre' size="100%" maxlength="15"></td>
			</TR>
			<TR>
				<TD>Descripcion:</TD><td><input type='text' name='descripcion' size="100%" maxlength="70"></td>
			</TR>
			<tr>
				<TD colspan="2">Asignar Permisos:
					<table border="1" width="50%">

						<TR>
							<td><INPUT type='checkbox' name='todos1' onclick="marcar(this.parentNode,this)">AREA INFORMACION</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel1'>Noticias</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel2'>Agenda</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos2'>FORO</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos3' onclick=marcar(this.parentNode,this)>AREA COLEGIADO</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel3'>Revista Prensa</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel4'>Listas de correo</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel5'>Consultar BD</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel6'>Gestor de correo</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos4'>MISCEL&Aacute;NEA</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos5'>GESTIONAR BD</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos6' onclick="marcar(this.parentNode,this)">GESTIONAR CONTENIDOS</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel8'>Gestionar Noticias</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel9'>Gestionar Eventos</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel10'>Gestionar Perfiles</TD>
						</TR>



					</table>
				</TD>
			</tr>
			<TR>
				<TD>&nbsp;&nbsp;<INPUT type='submit' name='enviar' value="Enviar"></TD>
			</TR>
			

		</table></form>

jorge_nieves · #8 (**permalink**) 01/02/2006, 05:47

Con otra funcion de javascript que creo que es mas sencilla tampoco me hace nada.....

Código HTML:

<script >
		function grupo(cual, estado) {
			if (cual=='todos1') {
			document['forms']['permisos']['sel1']['disabled'] = estado;
			document['forms']['permisos']['sel2']['disabled'] = estado;
			}
		}
		</script >		
		
		<form name='permisos' action="?act=3" method="post">
		<table border="1" width="100%">
			<TR>
				<TD>Nombre:</TD><td><input type='text' name='nombre' size="100%" maxlength="15"></td>
			</TR>
			<TR>
				<TD>Descripcion:</TD><td><input type='text' name='descripcion' size="100%" maxlength="70"></td>
			</TR>
			<tr>
				<TD colspan="2">Asignar Permisos:
					<table border="1" width="50%">

						<TR>
							<td><INPUT type='checkbox' onkeyup=grupo(todos1,this.value=='')>AREA INFORMACION</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel1' disabled>Noticias</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel2' >Agenda</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos2'>FORO</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos3' onclick=marcar(this.parentNode,this)>AREA COLEGIADO</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel3'>Revista Prensa</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel4'>Listas de correo</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel5'>Consultar BD</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel6'>Gestor de correo</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos4'>MISCEL&Aacute;NEA</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos5'>GESTIONAR BD</TD>
						</TR>
						<TR>
							<TD><INPUT type='checkbox' name='todos6' onclick="marcar(this.parentNode,this)">GESTIONAR CONTENIDOS</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel8'>Gestionar Noticias</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel9'>Gestionar Eventos</TD>
						</TR>
						<TR>
							<TD>&nbsp;&nbsp;<INPUT type='checkbox' name='sel10'>Gestionar Perfiles</TD>
						</TR>



					</table>
				</TD>
			</tr>
			<TR>
				<TD>&nbsp;&nbsp;<INPUT type='submit' name='enviar' value="Enviar"></TD>
			</TR>
			

		</table></form>

tunait · #9 (**permalink**) 01/02/2006, 09:59

Tema trasladado al foro de javascript

JavierB · #10 (**permalink**) 01/02/2006, 10:11

Hola jorge_nieves

Fijate en que yo puse los checkbox agrupados en <div> y tu los tienes en una tabla, así que habrá que hacer algunos cambios. El checkbox para marcar lo pones así:

Código:

onclick="marcar(this,'sel8','sel9','sel10')">

Es decir pones a continuación de this el nombre de los checkbox que quieres marcar/desmarcar.

La función quedaría de esta forma:

Código:

function marcar(chk) {
  for(i=1;ele = arguments[i]; i++)
  	document.forms[0][ele].checked=chk.checked;
}

Espero que te sirva. Saludos,

caricatos · #11 (**permalink**) 01/02/2006, 10:14

Hola:

jorge_nieves: El ejemplo de Javierb (¡Hola

!) sirve si los checkboxes están agrupados por un contenedor de bloque, en donde parentNode es padre común de los objetos...

En el caso de tu tabla podrás acomodar mejor mi script... Pero para casos generales te recomiendo que los tengas agrupados por un criterio (a mi gusta más el uso de fieldset)

Si son parte de una tabla, te recomiendo que leas la colección de elementos input de la tabla...

laTabla.getElementsByTagName("input")... y si hay otros elementos como radios o text discriminarlos...

if (elemento.type == "checkbox")

Espero que te sirva.

Saludos

jorge_nieves · #12 (**permalink**) 01/02/2006, 12:06

al final he implementado el ejemplo de JavierB aunque por curiosidad he probado el de caricatos y tambien funciona. Por ciert, no hace falta dividir por secciones con el div, funciona igualmente sin ellos. Muy atentos, gracias.

jorge_nieves · #13 (**permalink**) 02/02/2006, 12:25

Una ultima cosa, en el ejemplo de javierB tenemos la funcion:

Código HTML:

function marcar(chk) {
  for(i=1;ele = arguments[i]; i++)
  	document.forms[0][ele].checked=chk.checked;
}

Si quiero utilizar la misma funcion para otro mismo formulario de la misma pagina?
Como seria?
He tenido que hacer otra funcion identica cambiando solo el [0] por el [1] del form:

Código HTML:

function marcar(chk) {
  for(i=1;ele = arguments[i]; i++)
  	document.forms[1][ele].checked=chk.checked;
}

Para no tener que repetir codigo, como lo puedo hacer?

JavierB · #14 (**permalink**) 02/02/2006, 12:36

Hola de nuevo.

Muy comprensible tu pregunta, si tuvieras 69 formularios menuda pereza poner 69 funciones casi idénticas

Esto debería funcionarte:

Código:

function marcar(chk) {
  frm=chk.form;
  for(i=1;ele = arguments[i]; i++)
  	frm[ele].checked=chk.checked;
}

Saludos, :adios.

jorge_nieves · #15 (**permalink**) 02/02/2006, 15:02

Pues no me funciona ni

Código HTML:

frm[ele].checked=chk.checked;

ni

Código HTML:

form[ele].checked=chk.checked;

ni

Código HTML:

forms[ele].checked=chk.checked;

ni

Código HTML:

document.forms[ele].checked=chk.checked;

¿?

caricatos · #16 (**permalink**) 02/02/2006, 16:15

Hola:

¿Es un error de edición o hay un espacio blanco entre el corchete cerrado y el punto en todos tus ejemplos...?

Saludos

jorge_nieves · #17 (**permalink**) 03/02/2006, 11:29

si te fijas está igual de espaciado que tu ejemplo, además los colores de la sintaxis se me ponen de forma correcta, lo acabo de rerecomprobar y parece estar correctamente...será cosa mía? nu se....