如何获取自举开关的值

Question

I'm using bootstrap switch & i want to get checkbox value on click on switch. I've tried this but i din't get the value. Could you check my code bellow & let me know where i did wrong

 $('.make-switch').bootstrapSwitch('state'); $('#price_check').click(function () { //alert('Test'); var check = $(this).val(); console.log(check) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script> <div class="margin-bottom-10"> <input type="checkbox" class="make-switch" id="price_check" name="pricing" data-on-color="primary" data-off-color="info" value="true"> </div>

Answer 1

Click events don't get triggered with switches. Try to use the event switchChange.bootstrapSwitch . This one gets triggered when changing a switch.

Also to check if it's on, I check if the class bootstrap-switch-on is applied. If not than the switch if off.

 $('.make-switch').bootstrapSwitch('state'); $('.make-switch').on('switchChange.bootstrapSwitch',function () { var check = $('.bootstrap-switch-on'); if (check.length > 0) { console.log('ON') } else { console.log('OFF') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script> <div class="margin-bottom-10"> <input type="checkbox" class="make-switch" id="price_check" name="pricing" data-on-color="primary" data-off-color="info" value="true"> </div>

Answer 2

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.

Answer 3

this code worked for me

   $('#price_check').on('switchChange.bootstrapSwitch', function (e, data) {

     alert($('#price_check').bootstrapSwitch('state'));

   });

Answer 4

Try this, you will get the value of checked element..

 $("#boot_switch").bootstrapSwitch({ onSwitchChange: function(e) { alert(e.target.value); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script> <div class="margin-bottom-10"> <input type="checkbox" class="make-switch" id="boot_switch" name="pricing" data-on-color="success" data-off-color="info" value="value1"> </div>

Answer 5

I guess all these solutions are old news as of v5?
in any case none of these work for me. So I used this solution

$('#orderSwitch').on('change', function() {
    console.log($(this).is(':checked'));
});

Answer 6

$("#price_check").change(function () {
    var price = false;

    if ($(this).prop('checked') == true) {
        price = true;
    } else {
        price = false;
    }
}

Answer 7

try this one to get value (true or false)

$('#boot_switch').on('switchChange.bootstrapSwitch', function (event, status) {
    console.log(status);
});

Answer 8

$("#price-check").prop("checked") // true / false