how to control the behavior of a checkbox switch

Question

how to control the behavior of a checkbox switch

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

What I need is quite simple, however I have not been able to find the solution, what I need is that when I click on the checkbox switch, that the switch activates or deactivates depending on an action, this block of my system deals with of changes of states, then when I want to change the state, I click on the swtich, it opens a modal, if I generate the change of state, the switch is activated or deactivated.

try the function that I show you below but I have not managed to do it ... because I have two switches in the example? to see that when you click on the first swtich the function is fine, but when I click on the second swtich the function sepses and in the console.log it appears only that it is activated ....

Any ideas on this ?, Thanks in advance.

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>

javascript jquery checkbox

asked by Rafa 08.11.2018 в 15:05

source

2 answers

0

@Bender, grateful for your answer, has helped me to solve that problem, I would like to make the last query and with this I would close my question, how can I control the behavior of the switch ?, I mean, in the next code I have put an alert confirm !, when I click on the element, I am asked if I want to change status, if I accept, I want the swtich to make the change and if not, I want it to remain as it is. it is understood?

I appreciate, greetings.

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>

answered by 08.11.2018 в 15:49

Join two tables into one in SQL Server I would like to know how I capture the option of a radiobutton to show it in the JTable of this window?

score 2 · Accepted Answer

Your code does not work because when you execute the function on_off() you are selecting all the elements of class .check and you are asking if they are in a checked state, which is a logic error because you really need to know if the input belonging to the span that was given a click is checked or not.

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>