A continuación expongo unos pequeños snippets o trucos a la hora de trabajar con checkboxes y jQuery. En mi opinión, quizá la forma más adecuada de acceder a los checkboxes mediante jQuery es asignándoles una clase. De esta forma podemos actuar sobre los checkboxes de una manera selectiva. Podremos tener más elementos de este tipo en nuestra página web pero sólo actuaremos sobre los que poseen determinada clase. Algunos ejemplos.
Comprobar si un checkbox está marcado
$(".ck").is(":checked");
Devuelve true si está marcado y false en cualquier otro caso.
Marcar un checkbox
$(".ck").attr("checked","checked");
Desmarcar un checkbox
$(".ck").removeAttr("checked");
Marcar todos los checkboxes
$(".ck:checkbox:not(:checked)").attr("checked", "checked");
Desmarcar todos los checkboxes
$(".ck:checkbox:checked").removeAttr("checked");
Combinando algunos de lo visto anteriormente podemos realizar fácilmente un check que haga la función de marcar/desmarcar todo y que actue sólo sobre los elementos con la clase "ck":
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".check_todos").click(function(event){
if($(this).is(":checked")) {
$(".ck:checkbox:not(:checked)").attr("checked", "checked");
}else{
$(".ck:checkbox:checked").removeAttr("checked");
}
});
});
</script>
<form>
<p><input name="Todos" type="checkbox" value="1" class="check_todos"/>Seleccionar todos</p>
<p>
<input name="elemento1" type="checkbox" value="1" class="ck"/>elemento 1<br />
<input name="elemento2" type="checkbox" value="2" class="ck"/>elemento 2<br />
<input name="elemento3" type="checkbox" value="3" class="ck"/>elemento 3<br />
<input name="elemento4" type="checkbox" value="4" class="ck"/>elemento 4<br />
<input name="elemento5" type="checkbox" value="5" class="ck"/>elemento 5</p>
<p>El siguiente check no se verá afectado</p>
<input name="elemento5" type="checkbox" value="5" />elemento n
</form>
No hay comentarios:
Publicar un comentario