将 onclick 事件绑定到 bootstrap-switch
Binding onclick event to bootstrap-switch
我正在构建一个表单,该表单应该根据用户所做的 bootstrap-switch 选择来隐藏和显示内容。 onclick="documentFilter 事件适用于普通复选框;但是,当我初始化 bootstrap-switch 时,代码无法按预期工作。知道我遗漏了什么吗?谢谢!
<!--DEPENDENCIES-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<!--HTML-->
<body>
<div class="container">
<label>
<input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')"> Some caption
</label>
<div id="hideableDiv" class="hiddenByDefault">Some hidable content
</div>
</div>
</body>
<!--PAGE-SPECIFIC SCRIPT-->
<script type="text/javascript">
//Initialise BootstrapSwitch
$("[name='my-checkbox']").bootstrapSwitch();
//Unchecked on load
$(".hiddenByDefault").hide();
//document filter function
function documentFilter(trigger, target) {
var $target = $(target);
$(trigger).change(function () {
$target.toggle(this.checked);
});
}
</script>
如果您检查 Bootstrap Switch library 的来源,您会发现它有一个 onSwitchChange
属性,您可以为其提供一个函数。切换开关时执行此功能。这具有消除对过时且丑陋的 on*
事件属性的需求的额外好处。试试这个:
$("[name='my-checkbox']").bootstrapSwitch({
onSwitchChange: function(e, state) {
$('#hideableDiv').toggle(state);
}
});
.hiddenByDefault { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" />
<div class="container">
<label>
<input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')">Some caption
</label>
<div id="hideableDiv" class="hiddenByDefault">Some hidable content
</div>
</div>
我正在构建一个表单,该表单应该根据用户所做的 bootstrap-switch 选择来隐藏和显示内容。 onclick="documentFilter 事件适用于普通复选框;但是,当我初始化 bootstrap-switch 时,代码无法按预期工作。知道我遗漏了什么吗?谢谢!
<!--DEPENDENCIES-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<!--HTML-->
<body>
<div class="container">
<label>
<input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')"> Some caption
</label>
<div id="hideableDiv" class="hiddenByDefault">Some hidable content
</div>
</div>
</body>
<!--PAGE-SPECIFIC SCRIPT-->
<script type="text/javascript">
//Initialise BootstrapSwitch
$("[name='my-checkbox']").bootstrapSwitch();
//Unchecked on load
$(".hiddenByDefault").hide();
//document filter function
function documentFilter(trigger, target) {
var $target = $(target);
$(trigger).change(function () {
$target.toggle(this.checked);
});
}
</script>
如果您检查 Bootstrap Switch library 的来源,您会发现它有一个 onSwitchChange
属性,您可以为其提供一个函数。切换开关时执行此功能。这具有消除对过时且丑陋的 on*
事件属性的需求的额外好处。试试这个:
$("[name='my-checkbox']").bootstrapSwitch({
onSwitchChange: function(e, state) {
$('#hideableDiv').toggle(state);
}
});
.hiddenByDefault { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css" />
<div class="container">
<label>
<input type="checkbox" name="my-checkbox" onclick="documentFilter(this, '#hideableDiv')">Some caption
</label>
<div id="hideableDiv" class="hiddenByDefault">Some hidable content
</div>
</div>