Hasta ahora hemos aprendido a levantar los elementos de un documento xhtml mediante su id, esta es la forma más común, pero no la única.
Antes de continuar pensemos en una hoja de estilos, en un css. Existen tres formas de acceder a una etiqueta, mediante su nombre, su id o su class. Si nosotros de pronto tuviéramos algo como esto:
<p id="parrafo" class="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </p>
Y quisiéramos aplicarle un estilo con css, podríamos hacerlo de tres formas diferentes:
Por su tipo de etiqueta:
p {color: #ccc; text-align: center; text-decoration: underline;}
Por su id:
#parrafo {color: #ccc; text-align: center; text-decoration: underline;}
O por su class:
.parrafo {color: #ccc; text-align: center; text-decoration: underline;}
Levantar una etiqueta por su nombre si bien no está mal, se usa poco en las hojas de estilos ya que limita demasiado debido a que en el anterior ejemplo estaríamos indicando que todos los párrafos deberían tener ese estilo. Sin embargo en las hojas css se suele usar algunos estilos aplicados directamente a la etiqueta, por ejemplo si tuviéramos que resetear varios tipos de elementos para que se vean igual en los distintos navegadores, o bien agregar algún estilo al body, ya que este tipo de etiqueta no se repetirá.
Levantar una etiqueta por su id es otra forma, aunque como todos sabemos (y si no lo sabés enterate ahora) un id puede aplicarse para una única etiqueta, no puede haber dos etiquetas con el mismo id, ya que es un error y la W3 te mandará preso por tal crimen 🙂
Y finalmente tenemos las class que funcionan igual que los id con la gran diferencia que varios elementos pueden tener el mismo nombre de clase.
La forma de acceder a los elementos con jquery es similar a css. Como habrás notado, para levantar un id utilizamos numeral + el nombre del id:
$("#parrafo")
Tanto como los nombre como las clases funciona igual:
Con los nombres de etiqueta:
$("p")
Y con las clases punto + nombre de la class:
$(".parrafo")
El nombre para levanta los elementos y el punto para hacerlo por class.
Por lo tanto siguiendo nuestro anterior ejemplo con la etiqueta párrafo:
<p id="parrafo" class="parrafo"> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. </p>
Para aplicarle estilos pero desde Javascript y Jquery lo haríamos de las siguientes formas:
Con nombre de etiqueta:
$("p").css({
'color': '#ccc',
'text-align': 'center',
'text-decoration': 'underline'
});
Con id:
$("#parrafo").css({
'color': '#ccc',
'text-align': 'center',
'text-decoration': 'underline'
});
Con Class:
$(".parrafo").css({
'color': '#ccc',
'text-align': 'center',
'text-decoration': 'underline'
});
A continuación les mostraré un ejemplo muy básico. Habrá una lista de categorías con un checkbox cada una, y uno más para seleccionar y quitar selección a todos:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
<li> <input type="checkbox" class="producto" value="2" /> Wii </li>
<li> <input type="checkbox" class="producto" value="3" /> Ps3 </li>
<li> <input type="checkbox" class="producto" value="4" /> Ps Vita </li>
<li> <input type="checkbox" class="producto" value="5" /> Atari </li>
</ul>
<input type="checkbox" id="seleccionar_todo" /> Seleccionar todo
</fieldset>
</form>
</body>
</html>
Ahora lo que nosotros tenemos que lograr es que al chequear el input con el id «seleccionar_todo» todos los checkbox de los productos se tilden o destilden dependiendo del estado de dicho elemento, al cual tendremos que aplicarle un evento change() y verifica si está tildado:
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
});
});
Ok, ahora que sabemos cómo guardar el estado del checked del input checkbox, utilizando el método is() aplicaremos ese mismo estado a los demás. Hay varias formas, una de ellas es levantarlos por su nombre de etiqueta, input:
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$("input").attr('checked', checkeado);
});
});
El problema acá es que si bien en el ejemplo funciona en la vida real nuestra página tendrá muchas etiquetas input, y nosotros sólo se lo queremos aplicárselo a ese grupo de checkbox.
Otra forma sería levantar todos los input que sean checkbox:
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$("input[type='checkbox']").attr('checked', checkeado);
});
});
Pero es casi lo mismo que la anterior, si bien no levantará todos los input, sí lo hará con todos aquellos que sean checkbox y no tengan nada que ver. Así que la forma correcta, desde mi punto de vista, sería levantarlos por su class, ya que estos elementos deberían ser los únicos que tienen esa clase:
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$(".producto").attr('checked', checkeado);
});
});
U otra forma casi igual también podría ser:
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$("#lista_productos .producto").attr('checked', checkeado);
});
});
En la anterior forma le aplicamos la acción de checked a todos los elementos con la clase «producto» mientras que en esta última se la aplicamos a todos los elementos con la misma clase pero que estén dentro del elemento con el id «lista_productos«.
Todas las formas logran el mismo resultado pero sólo las últimas son las que deberían aplicarse.
El código finalmente quedaría así:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#seleccionar_todo").change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(':checked');
$(".producto").attr('checked', checkeado);
});
});
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend> Seleccione sus productos </legend>
<ul id="lista_productos">
<li> <input type="checkbox" class="producto" value="1" /> XBox 360 </li>
<li> <input type="checkbox" class="producto" value="2" /> Wii </li>
<li> <input type="checkbox" class="producto" value="3" /> Ps3 </li>
<li> <input type="checkbox" class="producto" value="4" /> Ps Vita </li>
<li> <input type="checkbox" class="producto" value="5" /> Atari </li>
</ul>
<input type="checkbox" id="seleccionar_todo" /> Seleccionar todo
</fieldset>
</form>
</body>
</html>
Como vemos en Jquery la forma de levantar los elementos es igual a css, como lo dije al principio, lo que lo hace más fácil y rápido para nosotros.
Anterior: JQuery, parte 4: Método .css()
Siguiente: JQuery, parte 6: Método .each()
Hola, el ejemplo me funciona asi: si no tildo ningun checkbox, y tildo el #selecionar_todo no hace nada.
Si tildo algunos checkbox, y tildo el #selecionar_todo los destilda todo.
Mi duda es: debe funcionar asi, o deberia funcionar tildando y destildando todos los checkbox cuando tildo #seleccionar_todo
Sigo con los tutos, estan cada vez mas interesantes.
Saludos!!
No, en realidad cuando yo hice este ejemplo lo estaba usando con una versión medianamente vieja de Jquery, por ende, si lo estás usando con una nueva, lo más probable es que no funcione correctamente. El código que es así:
$(«#seleccionar_todo»).change(function(){
//Guarda el estado checked del elemento.
var checkeado = $(this).is(‘:checked’);
$(«.producto»).attr(‘checked’, checkeado);
});
Deberías reemplazarlo por:
$(«#seleccionar_todo»).change(function() {
//Guarda el estado checked del elemento.
var checkeado = $(this).prop(«checked»);
$(«.producto»).prop(‘checked’, checkeado);
});
Si querés ver más sobre el método prop():
http://api.jquery.com/prop/
Saludos!