Bienvenid@s, hoy veremos la forma de crear checkboxes a partir de Jquery y CSS3, para ello no vamos a necesitar el clásico input checkbox, sino que los crearemos a partir de una lista "ul", esto puede ayudar en gran medida a mejorar el diseño de la página.
Como es sabido el clásico input checkbox devuelve 2 posibles estados "on" y "off" y ahí es donde entrará en juego Jquery, para obtener el estado y posteriormente realizar las acciones que sean necesarias.
Cada uno de los elementos de la lista "li", tendrán un atributo llamado "value" donde podremos almacenar uno de los dos posibles estados "on" y "off", con Jquery capturaremos el evento click y estableceremos su estado dependiendo de su actuado actual, es decir, si hacemos click y el checkbox se encuentra en "on" pasará a estar en "off" y viceversa.
También podrás ver como extraer el estado de cada uno de los checkboxes, a partir, de un búcle $.each(), esto puede ser útil para almacenarlo en campos ocultos de un formulario, para su posterior envío.
En definitiva, es una manera de construir checkboxes que puedan reemplazar y actuar como lo podría hacer un clásico input checkbox.
DEMOSTRACIÓN
El código del ejemplo es el siguiente ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como crear botones checkbox con Jquery y CSS3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".checkbox-group li").bind("click", function(){
if($(this).hasClass("checkbox-group-active"))
{
$(this).removeClass("checkbox-group-active");
$(this).attr("value", "off");
}
else
{
$(this).addClass("checkbox-group-active");
$(this).attr("value", "on");
}
$("#checkbox-value").html("");
$(".checkbox-group li").each(function(){
$("#checkbox-value").append($(this).text() + ":" + $(this).attr("value") + "<br>");
});
});
});
</script>
<style>
.checkbox-group li
{
float: left;
display: inline;
list-style: none;
border-left: 1px solid #DBE1EB;
border-bottom: 1px solid #DBE1EB;
border-top: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
background: #454F6F;
background: linear-gradient(top, #454F6F, #5D6684);
background: -moz-linear-gradient(top, #454F6F, #5D6684);
background: -webkit-linear-gradient(top, #454F6F, #5D6684);
background: -o-linear-gradient(top, #454F6F, #5D6684);
color: #FFFFFF;
}
.checkbox-group li:first-child
{
border-radius: 4px 0px 0px 4px;
}
.checkbox-group li:last-child
{
border-radius: 0px 4px 4px 0px;
}
.checkbox-group:hover
{
cursor: pointer;
}
.checkbox-group-active
{
background: #8A92AA !important;
background: linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -moz-linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -webkit-linear-gradient(top, #8A92AA, #A1A7BC) !important;
background: -o-linear-gradient(top, #8A92AA, #A1A7BC) !important;
}
</style>
</head>
<body>
<ul class="checkbox-group">
<li value="off">Uno</li>
<li value="off">Dos</li>
<li value="off">Tres</li>
<li value="off">Cuatro</li>
<li value="off">Cinco</li>
<li value="off">Seis</li>
<li value="off">Siete</li>
<li value="off">Ocho</li>
<li value="off">Nueve</li>
</ul>
<br /><br /><br />
Valores de los checkboxes:
<div id="checkbox-value"></div>
</body>
</html>
No hay comentarios:
Publicar un comentario