'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 |