'How to get value of bootstrap switch

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>


Solution 1:[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>

Solution 2:[2]

this code worked for me

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

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

   });

Solution 3:[3]

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

Solution 4:[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>

Solution 5:[5]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Wimanicesir
Solution 2 Claudio Martinez
Solution 3 Dharman
Solution 4 Abhishek Singh
Solution 5 Luke Watts