Estoy realizando un programa de múltiples opciones. Para eso, uso checkboxes. Estos los he convertido a botones deslizables.
$(document).ready(function(){
$('#data').click(function(){
var data=$('#data').serialize();
alert(data);
});
$('.switch').click(function(){
$(this).toggleClass("switchOn");
});
});
.switch{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:before{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:after{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
z-index: 2;
background: #FFFFFF;
position: absolute;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
top: 1px;
left: 1px;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.switchOn , .switchOn:before{
background: #59B548 !important;
}
.switchOn:after{
left: 21px !important;
}
.checkbox{display:none}
.switch{
width: 62px;
height: 32px;
background: #E5E5E5;
z-index: 0;
margin: 0;
padding: 0;
appearance: none;
border: none;
cursor: pointer;
position: relative;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:before{
content: ' ';
position: absolute;
left: 1px;
top: 1px;
width: 60px;
height: 30px;
background: #FFFFFF;
z-index: 1;
border-radius:16px; //IE 11
-moz-border-radius:16px; //Mozilla
-webkit-border-radius:16px; //Chrome and Safari
}
.switch:after{
content: ' ';
height: 29px;
width: 29px;
border-radius: 28px;
background: #FFFFFF;
position: absolute;
z-index: 2;
top: 1px;
left: 1px;
-webkit-transition-duration: 300ms;
transition-duration: 300ms;
-webkit-box-shadow: 0 2px 5px #999999;
box-shadow: 0 2px 5px #999999;
}
.switchOn , .switchOn:before{
background: #4cd964 !important;
}
.switchOn:after{
left: 21px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="data">
<input type="checkbox" name="checkbox1" class="checkbox">
<div class="switch"></div>
<input type="checkbox" name="checkbox2" class="checkbox">
<div class="switch"></div>
<input type="checkbox" name="checkbox3" class="checkbox">
<div class="switch"></div>
</form>
Está de esta forma. Lo que yo quiero saber, primeramente es cómo hago para que me tome el valor del checkbox que que elijo. Como se muestra con el alert(), aparece completamente vacío, ni siquiera toma el nombre.
Y lo segundo, sería cómo hacer para que el botón llegue al otro extremo. Podrán notar que hay un problema con los estilos, pero no sé cómo corregirlo.
Agradezco de antemano la ayuda que me puedan brindar.