1

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.

0

1 respuesta 1

1

La estructura html la dejaría así para poder coger el valor del input desde el click del switch:

<div class="switch">
    <input type="checkbox" name="checkbox1" class="checkbox" value="5">
</div>

El estilo para que llegue al final (es el último de todos):

.switchOn:after{
    left: 31px !important;
}

JS Para coger el valor:

$('.switch').click(function(){
    $(this).toggleClass("switchOn");
    alert($(this).find("input").val());
});

$(document).ready(function(){
    $('#data').click(function(){
       var data=$('#data').serialize();
      //alert(data);
    });
    $('.switch').click(function(){
        $(this).toggleClass("switchOn");
            alert($(this).find("input").val());
        });
    });
.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: 31px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="data">
    <div class="switch">
        <input type="checkbox" name="checkbox1" class="checkbox" value="5">
    </div>
    <input type="checkbox" name="checkbox2" class="checkbox">
    <div class="switch"></div>
    <input type="checkbox" name="checkbox3" class="checkbox">
    <div class="switch"></div>
</form>

1
  • Oye, muchas gracias. Es justo lo que necesitaba. Te agradezco mucho.
    – Saco04
    Commented el 24 may. 2019 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.