web-dev-qa-db-fra.com

Comment obtenir l'état de basculement du commutateur (vrai / faux) en javascript

J'ai une bascule de commutateur qui a le code suivant, suite à l'une des questions StackOverflow que j'ai faites de la même manière

Voici Comment ajouter le texte "ON" et "OFF" pour basculer le bouton

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

et dans css je désactive la case d'entrée

.switch input {display:none;} alors comment puis-je obtenir la valeur vraie/fausse de ce bouton bascule de commutateur. J'ai essayé mais ça ne marche pas pour moi

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

Comment puis-je obtenir la vérification/décocher ou la valeur vraie/fausse dans js pour mon bouton de commutateur à bascule

javascriptjqueryhtmlcheckbox
3
summu

La condition jquery if vous donnera:

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
    }
});
4
Himanshu Upadhyay

Vous pouvez y parvenir facilement par JavaScript:

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

ou si votre entrée a un id='switchValue'

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

Cela retournera vrai si un commutateur est activé et faux si un commutateur est désactivé.

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

OU 

$("#togBtn").on('change', function() {
     togBtn= $(this);
     togBtn.val(togBtn.prop('checked'));
}
0
לבני מלכה