CODEWITHSUNDEEP
jquerycheckboxtwitter-bootstrap-3toggle
H. Ferrence
H. Ferrence

Reputation: 8116

How to get the value of a Bootstrap toggle button in jQuery

I have this markup and jQuery but I cannot successfully capture the button value or on/off or any form of recognition of the setting of the toggle:

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

Here are the slider buttons (there is no checkbox): enter image description here enter image description here

Upvotes: 25

Views: 84743

Answers (6)

Shahidkhan
Shahidkhan

Reputation: 1

$('body').on('click', '#payMethod', function (e) {
if($(this).prop("checked") == true){
  console.log("Checkbox is checked.");
}else{
  console.log("Checkbox is unchecked.");
}

Try this one:

Upvotes: 0

AlbertLeng
AlbertLeng

Reputation: 177

Using Chrome DevTool Ctrl+Shift+i->Element. I right clicked on my toggle button and select inspect. Then, I toggled the button to on and off. Then, only I realized, the fired event is not on the input element but a div added by BootstrapToggle.

enter image description here

Hence, with that in my code, I added listener to the aforementioned div and read the state of my toggle button then. My codes:

$('div[data-toggle="toggle"]').click(function() {
      console.log( "toggle_show_cancelled value: " + $("#toggle_show_cancelled").prop("checked"))
    })

Upvotes: 1

Pasindu Madushan
Pasindu Madushan

Reputation: 11

Your script should need to be inside html body. 

<Body>
    <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>
    <script>
        $('#payMethod').on( 'change', function() {
            alert('slid');
        });
    </script>
</Body>

Upvotes: 1

ThienSuBS
ThienSuBS

Reputation: 1622

You can use simple like this: If in your html code you using id=abc for bootstrap toggle.

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

Output is: true or false. (True when toggle in on, and false when toggle is off)

Upvotes: 15

Oetawan Arya Chandra
Oetawan Arya Chandra

Reputation: 21

I guess that the script placed before the HTML tag? If so, then move the script after the Html tag, or place the script inside jQuery function as below:

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

The best practice is to use the later one, which place the script inside the jQuery function. Because the scripts will be rendered after all HTML tags has been rendered.

Upvotes: 2

etcz0ne
etcz0ne

Reputation: 1432

you can try this

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

Upvotes: 34

Related Questions