官网demo:http://www.bootcss.com/p/bootstrap-switch/
官网上例子很漂亮,code 写的比较详细,照着写还是出现了一个问题,问题虽然解决了,但是疑惑依然存在,官网的写法应该是不会有问题的,但是我的效果也展现出来了,希望了解的小伙伴儿给解释下,多谢!
1、css+js引入:
<link href="<%=basePath%>css/common/bootstrap/bootstrap.css"
rel='stylesheet' type='text/css' />
<link href="<%=basePath%>css/common/bootgrid/jquery.bootgrid.css"
rel='stylesheet' type='text/css' />
<link href="<%=basePath%>css/common/bootstrap/bootstrap-switch.min.css"
rel='stylesheet' type='text/css' />
<script type="text/javascript"
src="<%=basePath%>js/common/bootstrap/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/common/bootstrap/bootstrap.js"></script>
<script type="text/javascript"
src="<%=basePath%>js/common/bootstrap/bootstrap-switch.min.js"></script>
2、bootstrap-switch 选中、取消事件报错!
不知道是我引入的js版本问题还是写法有问题,使用如下代码控制按钮是否选择时,后台报错,代码及错误如下:
$('#toggle-state-switch').bootstrapSwitch('setState', false);
此时 jsp 代码如下:
<body>
<div style="padding-top: 10px; width: 120%;">
<input id="d1" name="status" type="checkbox"
data-size="small" /> <input id="d2" name="status" type="checkbox"
data-size="small" />
</div>
<script type="text/javascript">
$(function() {
$('#d1').bootstrapSwitch('setState', false);
});
$('[name="status"]').bootstrapSwitch({
onText : "通过",
offText : "不通过",
onColor : "success",
offColor : "warning",
size : "small",
onSwitchChange : function(event, state) {
var iptname = event.target.id + "value";
}
});
</script>
</body>
反复测试无效后(磨磨唧唧一个周六就过去了,哎……),使用如下代码解决:
$('#d1').bootstrapSwitch('toggleState',true);
按官网示例写法 toggleState 为 还原按钮操作,没想到这里确实设置是否选择!
问题虽然解决了,但是疑惑依然存在,官网的写法应该是不会有问题的,但是我的效果也展现出来了,希望了解的小伙伴儿给解释下,多谢!