lo que necesito es bastante sencillo, sin embargo no he podido encontrar la solución, lo que necesito es que cuando de click en el checkbox switch, que el switch de active o desactive dependiendo de una acción, este bloque de mi sistema trata de cambios de estados, entonces cuando quira cambiar el estado, doy click en el swtich, me abre un modal, si genero el cambio de estado, se activa o desactiva el switch.
intente con la función que les muestro a continuacón pero no he logrado hacerlo... ¿porque tengo dos switch en el ejemplo? para que vean que al momento de hacer click en el primer swtich la función anda bien, pero cuando doy click en el segundo swtich la función sepega y en el console.log me aparece solo que esta activado....
alguna idea sobre esto?, gracias de antemano.
function on_off(){
if($(".check").prop("checked") == true){
console.log("Activado");
}else{
console.log("Desactivado");
}
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .3s;
transition: .3s;
}
input:checked + .slider {
background-color: #9B27AF;
}
input:focus + .slider {
box-shadow: 0 0 1px #9B27AF;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off()"></span></label>
<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off()"></span></label>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>