Cómo hacer un botón ON/OFF con un checkbox

Cuando queremos configurar opciones SI/NO, ON/OFF, ACTIVADO/DEACTIVADO solemos utilizar u checkbox, pero muchas veces queda un poco evidente de lo que pretendemos. Con un poco de CSS y el uso de JQUERY podremos obtener un resultado muy atractivo.

Hoy un poco de diseño con CSS

¿Que te parecería tener en tu WEB un botón de ON/OFF? Con este poco código que te propongo hoy podrás tenerlo.

Es mucho mas fácil de lo que parece

No se necesita imágenes de fondo, ni nada. Todo es códico CSS para dar el diseño al botón.

/*- -/switch- -*/
.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
       display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid # 777;
    border-radius: 20px;
	-o-border-radius: 20px;
	- -webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: # 00C6D7; color: # FFFFFF;
	  font-weight: 400;
}
.onoffswitch-inner:after {
      content: "OFF";
    padding-right: 10px;
    background-color: # 002561;
    color: # fff;
    text-align: right;
    font-weight: 400;
}
.onoffswitch-switch {
    display: block;
    width: 34px;
    margin: 0.5px;
    background: # FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 56px;
    border: 2px solid # 777;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

Si analizas un poco el CSS podrás comprobar que no siempre tiene que ser ON/OFF puedes escribir lo que se te ocurra en la etiqueta "content".

Ahora el HTML

Con este poco código HTML se dibuja el botón.

  < div class="onoffswitch" >
       < input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" 
                        onchange="asignaCheckbox('myonoffswitch', '< %= CheckBox1.ClientID % >')" />
       < label class="onoffswitch-label" for="myonoffswitch" >
           < span class="onoffswitch-inner" >< /span >
           < span class="onoffswitch-switch" >< /span >
       < /label >
  < /div >

Como puedes observar en el evento "onchange" se hace la llamada a un JQUERY. Es éste el que va a hacer el cambio de valor en nuestro checkbox de ASP, ya que yo no he conseguido que funcione directamente con el CSS. El que lo consiga que lo comente y así todos mejoramos.

El JQUERY

Te recuerdo que para ejecutar el JQUERY necesitas cargar la librería básica de JQUERY.

/* asignar el valor de un checkbox a otro (sender) al elemen d (destination)  */
function asignaCheckbox(s, d) {
    try {
        var marcado = $(document.getElementById(s)).prop("checked");
        if ($(document.getElementById(s)).prop("checked")) {
            $(document.getElementById(d)).prop("checked", true);  // para poner la marca
        }
        else {
            $(document.getElementById(d)).prop("checked", false);  // para poner la marca
        }
    } catch (e) {
        alert(e.message);
    }
}

Como hacer para recoger el valor al cargar la página

Cuando cargamos la página y asignamos el valor a nuestro checkbox debemos hacer que el el checkbox HTML cambie de valor también, para ello ejecutaremos la función de asignaCheckbox lo primera tras la carga de la página.

    < script type="text/javascript" >
        $(document).ready(function () {
            asignaCheckbox('< %= CheckBox1.ClientID % >', 'myonoffswitch');
        });
    < /script >

Si tenemos muchos checkbox repetiremos esta línea por cada uno de ellos. O si prefieres puedes ejecutar un bucle de la forma que prefieras.

Consideraciones

La única "pega" que tiene esta forma de hacer las cosas es que tenemos que ocultar los checkbox asp y no puede ser con la propiedad visible=false ya que esto hacer que no se carguen y el JQUERY no los encuentra. Para ello solo he encontrado englobar dentro de un DIV y en el estilo ponerle la propiedad display:none

< div style="display:none" >< /div >

Conclusiones

Espero que les haya sido de utilidad, cualquier duda o mejora ya saben... A COMENTAR!!!

#css #CSHARP #jquery #AJAX #ASP #HTML

Para descargar el archivo con el se agradece una donación voluntaria de la cantidad que desee. Haz click en el botón donar.