How to change state of a switch dynamically using jquery?

Question

I have a switch icon purely designed in CSS. I got the design for switch from this page https://www.w3schools.com/howto/howto_css_switch.asp and some added modifications on the switch from this answer in stack overflow https://stackoverflow.com/a/39846603/5550284 .

This is how it looks like so far

    <!DOCTYPE html>
    <html>
    <head>
     <title></title>
     <meta charset="utf-8"/>
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <style type="text/css">
                  .switch {
                    position: relative;
                    display: inline-block;
                    width: 90px;
                    height: 34px;
                  }
    
                  .switch input {display:none;}
    
                  .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: #ca2222;
                    -webkit-transition: .4s;
                    transition: .4s;
                  }
    
                  .slider:before {
                    position: absolute;
                    content: "";
                    height: 26px;
                    width: 26px;
                    left: 4px;
                    bottom: 4px;
                    background-color: white;
                    -webkit-transition: .4s;
                    transition: .4s;
                  }
    
                  input:checked + .slider {
                    background-color: #2ab934;
                  }
    
                  input:focus + .slider {
                    box-shadow: 0 0 1px #2196F3;
                  }
    
                  input:checked + .slider:before {
                    -webkit-transform: translateX(55px);
                    -ms-transform: translateX(55px);
                    transform: translateX(55px);
                  }
    
                  /*------ ADDED CSS ---------*/
                  .on
                  {
                    display: none;
                  }
    
                  .on, .off
                  {
                    color: white;
                    position: absolute;
                    transform: translate(-50%,-50%);
                    top: 50%;
                    left: 50%;
                    font-size: 10px;
                    font-family: Verdana, sans-serif;
                  }
    
                  input:checked+ .slider .on
                  {display: block;}
    
                  input:checked + .slider .off
                  {display: none;}
    
                  /*--------- END --------*/
    
                  /* Rounded sliders */
                  .slider.round {
                    border-radius: 34px;
                  }
    
                  .slider.round:before {
                    border-radius: 50%;}
        
            </style>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    
     </head>
    <body>
       <label class="switch">
          <input type="checkbox" id="togBtn">
          <div class="slider round">
              <span class="on">ON</span>
              <span class="off">OFF</span>
          </div>
        </label>
    
    
     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
     <script type="text/javascript">
      
    
     </script>
    </body>
    </html>

Now I actually want to change the state of the switch using JavaScript based on the flag given by the back-end.

So this is what I do

      if(response.data == "t"){
            $('.switch-off').remove();
            $('.switch-on').remove();
            $('.toggle-slider').append('<span class="switch-on"></span>');
            console.log("Prompt ON")
      }
      else if (response.data == "f") {
            $('.switch-on').remove();
            $('.switch-off').remove();
            $('.toggle-slider').append('<span class="switch-off"></span>');
            console.log("Prompt OFF")
      }

Assume here response is an object sent by the back-end which has a field called data which contains the flag value t or f.

But it doesn't seem to do anything and using inspector in Firefox, I see the span elements randomly appearing and disappearing on toggle without any fixed behaviour. I suspect the CSS for the switch is somehow interfering with the state of the slider on the switch.

Can someone help me out with this problem?

ControlAltDel · Answer 1 · 2019-10-22T13:40:53.477

5

Actually, I was just doing this last night on the same slider that you are.

the way to do it is

checked = ...; //boolean
$(slider).children("input").prop("checked",checked);

To check slider on/off, use

$(slider).children("input").is(":checked");

edited Oct 22 '19 at 13:40

answered Oct 21 '19 at 17:07

ControlAltDel

33,923
10
53
80

Better use `prop()` instead of `attr()` https://stackoverflow.com/questions/5874652/prop-vs-attr – Ergec Oct 21 '19 at 17:12
Your solution works too but I prefer Lian's solution for my work. Upvoted your solution as well. – Souvik Ray Oct 22 '19 at 06:36

score 1 · Accepted Answer · answered Oct 21 '19 at 17:14

You have a hidden checkbox which toggles the switch. So doing this will toggle it on:

$('#togBtn').prop('checked', true);

and off:

$('#togBtn').prop('checked', false);

EDIT: Added full code

So your full code would be:

if (response.data == "t") {
    $('#togBtn').prop('checked', true);
}
else if (response.data == "f") {
    $('#togBtn').prop('checked', false);
}

How to change state of a switch dynamically using jquery?

2 Answers2

Linked

Related