Bootstrap Switch Checked Event

Bootstrap 4 switch change event will not work

A checkbox has a checked attribute.

Hence use:

let test = e.target.checked;

Because you add dynamically the switch you need to delegate the change event:

$(document).on('change', '.custom-control', function (e) {

The snippet:

$(document).on('change', '.custom-control', function (e) {
    let test = e.target.checked;
    console.log(test);
});

$('body').append('<div class="custom-control custom-switch">\
        <input type="checkbox" class="custom-control-input" id="customSwitch1">\
        <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>\
</div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Bootstrap switch button event

You can check if input is checked:

$('#switch').on('switchChange.bootstrapSwitch', function (event, state) {
    var x = $(this).data('on-text');
    var y = $(this).data('off-text');
    if($("#switch").is(':checked')) {
      $("#in0p1").val(x);
    } else {
      $("#inp1").val(y);
    }
});

$('#switch2').on('switchChange.bootstrapSwitch', function (event, state) {
    var x = $(this).data('on-text');
    var y = $(this).data('off-text');
    if($("#switch2").is(':checked')) {
      $("#inp2").val(x);
    } else {
      $("#inp2").val(y);
    }
});

JSFIDDLE

bootstrap-switch - trigger event when toggled

Try replacing the following:

($('#id_display_address_on_one_line').is(':checked')) ?
                true:
                false,

with:

$('#id_display_address_on_one_line').bootstrapSwitch('state')

Binding onclick event to bootstrap-switch

If you check the source of the Bootstrap Switch library you'll see it has a onSwitchChange property which you can provide a function to. This function is executed when the switch is toggled. This has the added benefit of removing the need for the outdated and ugly on* event attribute. Try this:

$("[name='my-checkbox']").bootstrapSwitch({
  onSwitchChange: function(e, state) {
    $('#hideableDiv').toggle(state);
  }
});

.hiddenByDefault { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" />

<div class="container">
  <label>
    <input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')">Some caption
  </label>

  <div id="hideableDiv" class="hiddenByDefault">Some hidable content
  </div>
</div>

Bootstrap Switch - Change state after clicking on button

You can use the state method to prevent the switch from changing. Remember to use the third parameter to make sure the event is not executed again.

    $('#myswitch').bootstrapSwitch('state', !data, true);

Working example :

https://jsfiddle.net/hL0as0mv/169/

Full documentation :
http://bootstrapswitch.site/methods.html

How to get value of bootstrap switch

Tamara,

Bootstrap Switch has an onSwitchChange property that will be able to give you the state of the toggle. Please see this fiddle: https://jsfiddle.net/learnwithclyde/to2hng3f/

$("#price_check").bootstrapSwitch({
  onSwitchChange: function(e, state) { 
    alert(state);
  }
});

The above code snippet is how you would implement onSwitchChange property and get the state of the toggle control.

Bootstrap Switch manual switch event

Run into same problem yesterday. Solution was found in documentation. In your case you must provide 3rd parameter set to false:

$('#'+selected_id).bootstrapSwitch('state', current_state, true);

This parameter (named skip) must be provided and set to true when you don't need to trigger switchChange event(-s).

Onchange event in a bootstrap checkbox

The documentation says to use jQuery change.

Demo:

$('#chk1').change(function() {  alert($(this).prop('checked'))})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script><link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"><script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" checked data-toggle="toggle">

---

Related Topics