引导开关检查事件?
Posted
技术标签:
【中文标题】引导开关检查事件?【英文标题】:Bootstrap switch checked event? 【发布时间】:2013-09-20 17:35:25 【问题描述】:我将此代码用于复选框选中事件,但它不起作用。
css
<link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" />
<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
<script src="assets/plugins/bootstrap-switch/static/js/bootstrap-switch.js" type="text/javascript"></script>
如果我使用这种方式,只是视觉样式效果很好,但它不会触发toggleWeather()
功能,但是如果我删除bootstrap-switch.js
,所有视觉样式都会被删除,并且看起来像标准复选框,尽管它工作得很好。
如何更改复选框选中状态并使用引导开关单击它?
这里是我的切换天气代码:
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);
顺便说一下,我在这个主题中使用了这些开关: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal
这不是很好的例子,但就是这样 http://jsfiddle.net/UHkN6/
【问题讨论】:
在此处发布toggleWeather
代码,或在jsfiddle.net 中解决问题
试试 $(document).on('click','#swWeather',function());点击事件
在哪个点击事件中?我必须放在哪里?
似乎是正确的,只是在这里装箱:jsbin.com/IYuMuLI/1/edit
它是这样工作的,但它看起来是标准的复选框,如果它看起来像引导开关,它不能正常工作
【参考方案1】:
你应该像下面这样调用switch-change函数
$('.switch').on('switch-change', function ()
console.log("inside switchchange");
toggleWeather();
);
如果您希望动态创建它,请按照我之前发布的链接中给出的步骤操作。 [create a radio bootstrap-switch dynamically]
这是无线电类型。对于复选框类型,您可以更改type='checkbox'
。
您可以参考以下链接了解更多示例 - http://www.bootstrap-switch.org/
【讨论】:
【参考方案2】:注意:bootstrap docs 现在使用第二个示例。
对于 bootstrap-switch 3.0 候选版本,之前在官方页面上作为示例给出的事件是:
$('#switch-change').on('switchChange', function (e, data) );
它不会被解雇!
解决方案 - 改用这个:
$('#switch-change').on('switchChange.bootstrapSwitch', function (event, state) );
其中state
参数是checkbox
的值。
【讨论】:
只是一个注释,但到目前为止,组件或文档中仍未修复此问题。 今天也没有修复 这确实应该在文档中。 :D 如何反转函数内部的状态(事件,状态)?? 这对我不起作用,但下面的那个对我有用。 ***.com/a/39450925/4526479【参考方案3】:文档提供了引导开关的事件。但是here 是一个示例,它使用单个复选框以及一个单选组,只是为了完整性。我也抛出了 Disable 方法。
$('#TheCheckBox').on('switchChange.bootstrapSwitch', function ()
$("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
);
【讨论】:
【参考方案4】:试试这个对我有用
$('#check').change(function (event)
var state = $(this).bootstrapSwitch('state');
if (state)
// true
else
// false
event.preventDefault();
);
【讨论】:
【参考方案5】:对我来说,这是唯一有效的代码(Bootstrap 3.0):
$('#my_checkbox').on('change.bootstrapSwitch', function(e)
console.log(e.target.checked);
);
它返回我 true 或 false
在引导开关更改时提交 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);
);
);
【讨论】:
对我有用,但state
是 undefined
。您从 e.target.checked
获得价值,这似乎是获得它的正确方法。
是的,你说得对,在这种情况下状态可能未使用。我会删除它。
它适用于Bootstrap 4.3
https://getbootstrap.com/docs/4.3/components/forms/
代码<div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Do it!</label> </div>
【参考方案6】:
这对我有用。
$(".switch").bootstrapSwitch(
'size': 'mini',
'onSwitchChange': function(event, state)
console.log('switched...')
,
'AnotherName':'AnotherValue'
);
【讨论】:
【参考方案7】:这是我使用它的方式:
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
);
希望对你有帮助!!
【讨论】:
【参考方案8】:试试这个
<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
);
【讨论】:
【参考方案9】:这在使用 bootstrapSwitch 时有效
$('body').on('switchChange.bootstrapSwitch','.switch',function ()
alert('Done')
);
【讨论】:
【参考方案10】:这只是一个程式化的复选框。所以你可以像使用复选框一样使用它
document.addEventListener('change', function()
var chk = event.target
if (chk.tagName === 'INPUT' && chk.type === 'checkbox')
console.log(chk.checked)
)
这个例子是为开关的 2 个位置设计的,作为响应,你会得到真或假——取决于复选框的位置
【讨论】:
以上是关于引导开关检查事件?的主要内容,如果未能解决你的问题,请参考以下文章