web-dev-qa-db-ja.com

jQueryのBootstrapトグルボタンの値を取得する方法

私はこのマークアップとjQueryを持っていますが、ボタンの値、オン/オフ、またはトグルの設定の認識を正常にキャプチャできません。

[〜＃〜] html [〜＃〜]

<div class="form-group">
    <label class="col-md-2 control-label" for="payMethod">Payment Method</label>
      <div class="col-md-2">
        <label class="checkbox-inline bootstrap-switch-noPad" for="payMethod">
          <input type="checkbox" id="payMethod" name="payMethod" data-size="small" value="Credit" data-on-text="Credit" data-on-color="success" data-off-text="Cash" data-off-color="warning" tabindex="13">
        </label>
      </div>
  </div>

jQuery

$('#payMethod').on( 'change', function() {
  alert('slid');
}); // does not work

$( "#payMethod" ).click(function() {
  alert( $('#payMethod').val() );
}); // does not work

$('#payMethod').change(function() {
  alert('Toggle: ' + $(this).prop('checked'));
}); // does not work

$('input[type=checkbox][name=payMethod]').change(function() {
  alert('help'); // does not work
});

スライダーボタンは次のとおりです（チェックボックスはありません）： enter image description hereenter image description here

jquerycheckboxtwitter-bootstrap-3toggle
16
H. Ferrence

これを試すことができます

$("#payMethod").change(function(){
    if($(this).prop("checked") == true){
       //run code
    }else{
       //run code
    }
});
20
Makubex

次のようにシンプルに使用できます：HTMLコードでbootstrap切り替えにid = abcを使用している場合。

$('#abc').prop('checked')

出力はtrueまたはfalseです。 （オンに切り替えた場合はtrue、オフに切り替えた場合はfalse）

7
ThienSuBS

スクリプトはHTMLタグの前に配置されていると思いますか？その場合は、Htmlタグの後にスクリプトを移動するか、以下のようにjQuery関数内にスクリプトを配置します。

$(function()
{

    $('#payMethod').on( 'change', function() {
         alert('slid');
    }); // does not work

    $( "#payMethod" ).click(function() {
         alert( $('#payMethod').val() );
    }); // does not work

    $('#payMethod').change(function() {
        alert('Toggle: ' + $(this).prop('checked'));
    }); // does not work

    $('input[type=checkbox][name=payMethod]').change(function() {
        alert('help'); // does not work
    });
});

ベストプラクティスは、jQuery関数内にスクリプトを配置する後者を使用することです。すべてのHTMLタグがレンダリングされた後にスクリプトがレンダリングされるためです。

2
Oetawan Arya Chandra