How to get the switch toggle state(true/false) in javascript

Question

I have a switch toggle which has following code, following one of the StackOverflow questions I did similarly

Here's How to add the text "ON" and "OFF" to toggle button

 <label class="switch">
 <input type="checkbox" id="togBtn" value="false" name="disableYXLogo">
 <div class="slider round"></div>
 </label>

and in css i am disabling input checkbox

.switch input {display:none;} then how would I get the true/false value of that switch toggle button. I tried this but it doesn't work for me

$("#togBtn").on('change', function() {
if ($(this).is(':checked')) {
    $(this).attr('value', 'true');
}
else {
   $(this).attr('value', 'false');
}});

How would I get the check/uncheck or true/false value in js for my toggle switch button

score 31 · Accepted Answer · answered May 01 '18 at 06:57

31

The jquery if condition will give you that:

var switchStatus = false;
$("#togBtn").on('change', function() {
    if ($(this).is(':checked')) {
        switchStatus = $(this).is(':checked');
        alert(switchStatus);// To verify
    }
    else {
       switchStatus = $(this).is(':checked');
       alert(switchStatus);// To verify
    }
});

answered May 01 '18 at 06:57

Himanshu Upadhyay

6,558
1
20
33

1

code is hiding the 'input checkbox' and it only doing css part for
so , above code doesnt work for $("#togBtn").on('change', function())
– summu May 01 '18 at 07:04
I did not understand your comment. – Himanshu Upadhyay May 01 '18 at 07:05
1

thanks it worked, i was working in chrome plugin so it was a part of callback function – summu May 01 '18 at 10:12
1

Thank you for accepting my answer. And voting it up. – Himanshu Upadhyay May 01 '18 at 10:21
1

You saved my so much time – Aniket Tiwari Jul 15 '20 at 19:37

score 16 · Answer 2 · edited Dec 21 '18 at 10:35

16

You can achieve this easily by JavaScript:

var isChecked = this.checked;
console.log(isChecked);

or if your input has an id='switchValue'

var isChecked=document.getElementById("switchValue").checked;
console.log(isChecked);

This will return true if a switch is on and false if a switch is off.

edited Dec 21 '18 at 10:35

executable

3,365
6
24
52

answered Dec 21 '18 at 10:09

Vadim Malakhovski

189
1
4

score 4 · Answer 3 · answered May 01 '18 at 07:07

$("#togBtn").on('change', function() {
        if ($(this).is(':checked')) {
            $(this).attr('value', 'true');
            alert($(this).val());
        }
        else {
           $(this).attr('value', 'false');
           alert($(this).val());
        }
    });

score 3 · Answer 4 · edited Mar 15 '22 at 07:37

3

if want to access table row

$('body').on('change', '#statusSwitch', function () {    
    if ($(this).is(':checked')) {
    ****Your logic*****
    }
    else {
        ***Your logic***
    }
});

edited Mar 15 '22 at 07:37

Dave

3,073
7
20
33

answered Mar 13 '22 at 14:00

Saugat Dhakal

41
1

Consider adding more information regarding additional answer you are adding here. – User1010 Mar 13 '22 at 14:25

score 0 · Answer 5 · answered May 01 '18 at 06:57

0

$("#togBtn").on('change', function() {
   if ($(this).attr('checked')) {
   $(this).val('true');
   }
  else {
   $(this).val('false');
}});

OR

$("#togBtn").on('change', function() {
     togBtn= $(this);
     togBtn.val(togBtn.prop('checked'));
}

answered May 01 '18 at 06:57

לבני מלכה

15,925
2
23
47

How to get the switch toggle state(true/false) in javascript

5 Answers5