web-dev-qa-db-ja.com

JavaScriptでスイッチの切り替え状態(true / false)を取得する方法

私が同様にしたStackOverflow質問の1つに従って、次のコードを持つスイッチトグルがあります

ここに トグルボタンにテキスト「オン」と「オフ」を追加する方法

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

そしてCSSで私は入力チェックボックスを無効にしています

.switch input {display:none;}次に、その切り替えトグルボタンのtrue/false値をどのように取得しますか。私はこれを試しましたが、うまくいきません

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

トグルスイッチボタンのjsでチェック/チェック解除またはtrue/false値を取得するにはどうすればよいですか

3
summu

Jquery if条件はそれを与えます:

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

これはJavaScriptで簡単に実現できます。

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

または、入力にid='switchValue'

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

スイッチがオンの場合はtrueを返し、スイッチがオフの場合はfalseを返します。

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

[〜#〜]または[〜#〜]

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