En el siguiente ejemplo voy a demostrar como marcar y desmarcar una lista de checkboxs a través de botones, para el caso se tratará de dos botones uno "marcar todos" y otro "desmarcar", al hacer click sobre el botón "marcar todos" se marcarán todos los checkboxs y al hacer click sobre el botón "desmarcar" se desmarcarán los checkbox marcados, da igual que sean todos o algunos.
Para ello utilizaré la función prop() de Jquery, que permite manipular y obtener valores de los atributos del elemento, para la manipulación de checkbox es conveniente usar está función ya que attr() no funciona del todo bien, de todas formas podéis realizar la misma prueba con prop() y attr(), con attr() sólo podrás activar a true los checkboxs una sola vez.
Código del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
marcar = function(elemento){
elemento = $(elemento);
elemento.prop("checked", true);
}
desmarcar = function(elemento){
elemento = $(elemento);
elemento.prop("checked", false);
}
});
</script>
</head>
<body>
<input type="button" onclick="marcar(':checkbox')" value="Marcar todos">
<input type="button" onclick="desmarcar(':checkbox')" value="Desmarcar">
uno: <input type="checkbox" name="check">
dos: <input type="checkbox" name="check">
tres: <input type="checkbox" name="check">
cuatro: <input type="checkbox" name="check">
cinco: <input type="checkbox" name="check">
</body>
</html>
El resultado ...
uno: dos: tres: cuatro: cinco:
No hay comentarios:
Publicar un comentario