JQuery - Marcar/Desmarcar todos checkbox Jquery

   
Vista:

Marcar/Desmarcar todos checkbox Jquery

Publicado por Miguel (7 intervenciones) el 05/12/2013 11:43:32
Hola a todos,

Estoy desarrollando un sitio web y quiero realizar lo siguiente con jquery:

Tengo una serie de checkbox organizados mediante una tabla y quiero tener la opcion de marcarlos/desmarcarlos todos cuando marque o desmarque otro checkbox. Estoy intentando programarlo con Jquery pero no encuentro la solución, aunque parece que la tengo.

El marcado de todos los checkbox lo consigo con esto:
1
2
3
4
5
$("#marcarTodos").click(
			function() {
				$("#diasHabilitados :checkbox").attr('checked', true);
			}
		);
Donde marcarTodos es el checkbox para marcar/desmarcar todos y diasHabilitados es el contenedor donde tengo los checkbox que quiero que se marquen desmarquen. Esto funciona.

El problema viene cuando quiero poder marcar/desmarcar todos. Tengo lo siguiente, pero no funciona:
1
2
3
4
5
6
7
8
9
10
$("#marcarTodos").click(
			function() {
				var marcado = $("#marcarTodos").is(":checked");
 
				if(!marcado)
					$("#diasHabilitados :checkbox").attr('checked',true);
				else
					$("#diasHabilitados :checkbox").attr('checked', false);
			}
		);
Cuando lo pruebo y hago click en mi checkbox de marcado general, no se marca ni este ni el resto.

¿Alguna idea?

Gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Marcar/Desmarcar todos checkbox Jquery

Publicado por xve (557 intervenciones) el 05/12/2013 23:52:00
Hola Miguel, para hacer referencia a varios checkbox, no puedes hacerlo por el ID, ya que en teoría, no se pueden repetir los id's.

Para ello, yo te recomiendo que utilices una clase o algo por el estilo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="es">
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        function checkTodos()
        {
            $(".check").each(function(){
                $(this).prop('checked',true);
            });
        }
    </script>
</head>
 
<body>
<form>
    <input type="checkbox" class="check" name="check1">
    <br><input type="checkbox" class="check" name="check2">
    <br><input type="checkbox" class="check" name="check3">
    <br><input type="button" onclick="checkTodos()" value="check todos">
</form>
</body>
</html>

Coméntanos si te sirve, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Marcar/Desmarcar todos checkbox Jquery

Publicado por Fernando (1 intervención) el 01/04/2014 17:49:30
Muy buena solución, gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar