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

Question

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):

score 34 · Answer 1 · answered Nov 10 '15 at 01:35

34

you can try this

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

answered Nov 10 '15 at 01:35

etcz0ne

1,362
1
14
23

Right, but the Bootstrap plugin shows a slider button and there is no checkbox. That's why I am having the trouble I guess – H. Ferrence Nov 10 '15 at 02:20
did you already checked this link? I hope it helps http://stackoverflow.com/questions/15736694/how-to-get-the-value-of-the-slider-bootstrap – etcz0ne Nov 10 '15 at 02:27
the slider('get value') does not work either. I just can't get anything to cause it to fire on click or change or slide, etc. – H. Ferrence Nov 10 '15 at 02:35
1

$(':checkbox').checkboxpicker().change(function() { ... }); – Himaan Singh Jul 06 '16 at 08:44

score 15 · Answer 2 · answered Apr 11 '17 at 13:01

15

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)

answered Apr 11 '17 at 13:01

ThienSuBS

1,574
18
26

score 2 · Answer 3 · edited Feb 22 '16 at 16:57

2

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.

edited Feb 22 '16 at 16:57

Leandro Bardelli

10,561
15
79
116

answered Nov 10 '15 at 01:59

Oetawan Arya Chandra

21
2

it's a snippet of the code. The entire script is right before the `
` tag, after the jQuery Lib loads.
– H. Ferrence Nov 10 '15 at 02:05
1

I have made the most progress with your suggestions here @OetawanAryaChandra. I don't have it working exactly yet, but tanks for your guidance. – H. Ferrence Nov 10 '15 at 03:26
`$( "#payMethod" ).click(function() { alert( $('#payMethod').val() ); });` this one is firing but only on **Credit**, **Cash** does not return – H. Ferrence Nov 10 '15 at 03:31
`` this comes close but the toggling happens every other click. In other words, my block hides on click #2 then shows on click #4 then hides on click #6 and shows again on click #8. I need it to toggle every other click – H. Ferrence Nov 10 '15 at 04:05

score 1 · Answer 4 · edited Apr 18 '20 at 17:22

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>

score 1 · Answer 5 · answered Mar 05 '21 at 04:07

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.

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

score 0 · Answer 6 · answered Jan 24 '23 at 19:03

0

$('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:

answered Jan 24 '23 at 19:03

Shahidkhan

1
1

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

6 Answers6