jQuery 引导开关检查事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18830219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap switch checked event?
提问by user2784250
I use this codes for checkbox checked event but it does not work.
我将此代码用于复选框选中事件，但它不起作用。
css
css
<link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" />
html
html
<div class="switch switch-mini" data-on-label="<i class='icon-sun icon-white'></i>" data-off-label="<i class='icon-sun muted'></i>">
<input id="swWeather" type="checkbox" class="toggle" onclick="toggleWeather()" />
</div>
js
js
<script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript"></script>
If I use this way, just visual style work well but it does not trigger toggleWeather()function, but if I remove bootstrap-switch.js, all visual styles are removed and looks standard as standard checkbox, although it works very well.
如果我使用这种方式，只是视觉样式效果很好，但它不会触发toggleWeather()功能，但是如果我删除bootstrap-switch.js，所有视觉样式都会被删除并且看起来像标准复选框一样标准，尽管它工作得很好。
How can I change checkbox checked status click it with bootstrap-switch?
如何更改复选框选中状态单击它与引导开关？
Here my toggleweather code:
这是我的切换天气代码：
function toggleWeather() {
if (document.getElementById('swWeather').checked)
{ weatherLayer.setMap(map); }
else
{ weatherLayer.setMap(null); }
if (document.getElementById('swCloud').checked)
{ cloudLayer.setMap(map); }
else
{ cloudLayer.setMap(null); }
}
by the way I use these switches with this theme: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal
顺便说一下，我在这个主题中使用这些开关：http: //www.keenthemes.com/preview/metronic_admin/form_component.html#myModal
It is not good example but like that http://jsfiddle.net/UHkN6/
这不是一个很好的例子，但就像 http://jsfiddle.net/UHkN6/
回答by sergiu
Note: The bootstrap docsnow use the second example.
注意：引导程序文档现在使用第二个示例。
For bootstrap-switch 3.0 release candidate the event previously given as an example on the official page was:
对于 bootstrap-switch 3.0 候选版本，之前在官方页面上作为示例给出的事件是：
$('#switch-change').on('switchChange', function (e, data) {});
It doesn't get fired!
它不会被解雇！
Solution - use this instead :
解决方案 - 改用它：
$('#switch-change').on('switchChange.bootstrapSwitch', function (event, state) {});
where stateparameter is the value of the checkbox.
其中state参数是 的值checkbox。
回答by Meloman
For me this was the only working code (Bootstrap 3.0) :
对我来说，这是唯一的工作代码（Bootstrap 3.0）：
$('#my_checkbox').on('change.bootstrapSwitch', function(e) {
console.log(e.target.checked);
});
It returns me trueor false
它返回我真或假
Example with Ajax submission on bootstrap switch change :
在引导开关更改时提交 Ajax 的示例：
$('#my_checkbox').on('change.bootstrapSwitch', function(e) {
$.ajax({
method: 'POST',
url: '/uri/of/your/page',
data: {
'my_checkbox_value': e.target.checked
},
dataType: 'json',
success: function(data){
console.log(data);
}
});
});
回答by user2680900
You should call the switch-change function like below
您应该像下面一样调用开关更改功能
$('.switch').on('switch-change', function () {
console.log("inside switchchange");
toggleWeather();
});
If you are seeing to create it dynamically, follow the steps given in the link which was previously posted by me. [ create a radio bootstrap-switch dynamically]
如果您希望动态创建它，请按照我之前发布的链接中给出的步骤操作。[动态创建无线电引导开关]
This is for radio type. For checkbox type you can change the type='checkbox'.
这是无线电类型。对于复选框类型，您可以更改type='checkbox'.
You can refer to the below link for more examples - http://www.bootstrap-switch.org/
您可以参考以下链接以获取更多示例 - http://www.bootstrap-switch.org/
回答by Skindeep2366
The documentation provides the events for the bootstrap-switch. But hereis an example that uses a single checkbox as well as a radio group just for completeness. I have also thrown in the Disable method as well.
该文档提供了 bootstrap-switch 的事件。但这里是一个使用单个复选框和无线电组的示例，只是为了完整性。我也抛出了 Disable 方法。
$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {
$("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});
回答by felixmpa
This work for me.
这对我有用。
$(".switch").bootstrapSwitch({
'size': 'mini',
'onSwitchChange': function(event, state){
console.log('switched...')
},
'AnotherName':'AnotherValue'
});
回答by Radames E. Hernandez
This is the way that I use it:
这是我使用它的方式：
HTMl:
网页版：
<input name="field_name" class="switcher" type="checkbox" data-size="small" value="1">
JQuery:
查询：
$('.switcher').on('switchChange.bootstrapSwitch', function(event, state) {
if (state)
{
// Checked
}else
{
// Is not checked
}
});
I hope it is helpful!!
我希望它有帮助！！
回答by PK-1825
try this
尝试这个
<input type="checkbox" name="my-checkbox" checked>
$('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function (event, state)
{
if (state == true)
{
//your code
}
else
{
//your code
}
});
回答by Bruno Ribeiro
Try this worked for me
试试这对我有用
$('#check').change(function (event) {
var state = $(this).bootstrapSwitch('state');
if (state) {
// true
} else {
// false
}
event.preventDefault();
});
