0

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>

1
  • 1
    Para controlar las acciones de los checkbox el evento más apropiado es el onchange. Trata de usar este en vez del onclick y nos cuentas.
    – phpMyGuel
    Commented el 8 nov. 2018 a las 14:16

2 respuestas 2

2

Tu código no funciona por que cuando ejecutas la función on_off() estás seleccionando todos los elementos de clase .check y estas preguntando si están en un estado checkeado, lo cual es un error de lógica por que realmente necesitas es saber si el input perteneciente al span al cual se le dio clic está checkeado o no.

function on_off(elemento){
   if($(elemento).siblings('input').prop("checked")){
      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(this)"></span></label>

<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off(this)"></span></label>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

0

@Bender, agradecido por tu respuesta, me ha servido para solucionar ese problema, me gustaría hacer la ultima consulta y con esto daría por cerrada mi pregunta, como es que puedo controlar el comportamiento del switch?, me explico, en el siguiente código he puesto un alert confirm!, cuando hago click en el elemento, me pregunta si deseo cambiar de estado, si doy en aceptar quiero que el swtich haga el cambio y si no, quiero que se quede tal cual. se entiende?

agradezco, saludos.

function on_off(elemento){
var r = confirm("¿Desea Cambiar de Estado?");
if($(elemento).siblings('input').prop("checked")){
      if (r == true) {
          console.log("cambio de estado");
      } else {
          console.log("NO cambio de estado");
      }
   }else{
      if (r == true) {
          console.log("cambio de estado");
      } else {
          console.log("NO cambio de estado");
      }
   }
 }
.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(this)"></span></label>

<label class="switch"><input type="checkbox" class="check" name="check" checked><span class="slider round" onclick="on_off(this)"></span></label>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

2
  • Rafa, esto no hace parte de la pregunta actual por tal debes de crear una nueva, adicional te recuerdo que este espacio es solo para respuestas no para aclaraciones ni "adiciones" a tu pregunta, por último si mi respuesta te ha servido te invito a marcarla como aceptada y te invito también a crear la nueva pregunta con este requerimiento que posteas, saludos. Commented el 8 nov. 2018 a las 14:55
  • @Bender como explique en el primer párrafo de mi pregunta, donde dice "lo que necesito es que cuando de click en el checkbox switch, que el switch de active o desactive dependiendo de una acción", hace alusión a la pregunta principal, de todas formas, te agradezco tu tiempo y formularé otra pregunta respecto a este tema, tu respuesta me ha servido por lo tanto la marqué como aceptada, saludos.
    – Rafa
    Commented el 8 nov. 2018 a las 15:00

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.