Как получить состояние переключения переключателя (истина / ложь) в JavaScript

Question

У меня есть переключатель, который имеет следующий код, следующий за одним из вопросов StackOverflow, который я сделал аналогично

Вот Как добавить текст «ВКЛ» и «ВЫКЛ» к кнопке переключения

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

и в css я отключаю флажок ввода

.switch input {display:none;} тогда как бы получить истинное / ложное значение этой кнопки переключения. Я пробовал это, но у меня это не работает

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

Как получить значение check / uncheck или true / false в js для моей кнопки тумблера

Answer 1

Этого легко добиться с помощью JavaScript:

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

или если ваш ввод имеет id='switchValue'

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

Возвращается значение true, если переключатель включен, и значение false, если переключатель отключен.

Answer 2

$("#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'));
}

Answer 3

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

Answer 4

JQuery если условие даст вам, что:

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
    }
});