引导复选框中的 Onchange 事件
Posted
技术标签:
【中文标题】引导复选框中的 Onchange 事件【英文标题】:Onchange event in a bootstrap checkbox 【发布时间】:2016-11-10 15:43:26 【问题描述】:我正在尝试拦截和处理引导复选框中的更改,并且我添加了一个“onchange”事件。不幸的是,我没有成功。目前,我有一个可以更改复选框状态的按钮,并且可以正常工作。
任何提示将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Toggle</title>
<link href="./css/github.min.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/bootstrap-toggle.css" rel="stylesheet">
<link href="./css/stylesheet.css" rel="stylesheet">
<script src="./js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap-toggle.js"></script>
</head>
<body>
<div id="events" class="container">
<h3>API vs Input</h3>
<p>This also means that using the API or Input to trigger events will work both ways.</p>
<div class="example">
<input id="chk1" type="checkbox" data-toggle="toggle" onchange="fonctionTest()">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<button class="btn btn-success" onclick="toggleOnOff('#chk1','on')">On by API</button>
<button class="btn btn-danger" onclick="toggleOnOff('#chk1','off')">Off by API</button>
<div id="console-event"></div>
<script>
$(function()
$('input:checkbox').change(function()
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
)
)
</script>
<script>
function fonctionTest()
console.log("This is a test");
function toggleOnOff(selector,state)
console.log("element : " + selector);
console.log($(selector).prop('checked'));
$(selector).bootstrapToggle(state);
function toggleOn()
$('#chk1').bootstrapToggle('on');
isOnOrOff();
function toggleOff()
$('#chk1').bootstrapToggle('off');
isOnOrOff();
function isOnOrOff()
var c=document.getElementById('chk1');
console.log(c.checked);
</script>
</div>
</body>
</html>
【问题讨论】:
请分享您用于复选框的插件链接? “js/bootstrap-toggle.js”的链接是bootstraptoggle.com。是你需要的吗? example 中提到的更改事件对您不起作用? 该示例有效,但由于我添加了 3 个复选框,现在我有 chk1、chk2、chk3 和 chk4,onchange 事件似乎没有反应 似乎对我有用。检查我在下面显示的示例... 【参考方案1】:文档说要使用 jQuery change。
演示:
$('#chk1').change(function()
alert($(this).prop('checked'))
)
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" checked data-toggle="toggle">
【讨论】:
【参考方案2】:它适用于所有复选框,如下例所示:
$('input:checkbox').change(function()
$('#console-event').html('Toggle: ' + $(this).prop('checked'));
console.log("Change event: " + this.id);
)
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<input id="chk1" type="checkbox" data-toggle="toggle">
<input id="chk2" type="checkbox" data-toggle="toggle">
<input id="chk3" type="checkbox" data-toggle="toggle">
<input id="chk4" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
编辑:
添加如下代码:
<script>
$(function()
$('input:checkbox').change(function()
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
)
)
</script>
【讨论】:
抱歉这个愚蠢的问题,但我应该在哪里插入 $('input:checkbox').change(function() $('#console-event').html('Toggle:' + $(this).prop('checked')) ) 在 我已经编辑了我的代码以考虑您的评论。非常感谢您帮助解决我的问题。最美好的祝愿 最后一个问题,如果我写类似 console.log("Change event: " + $(this));我是否有可能知道“谁”触发了更改(chk1、chk2、chk3 或 chk4)? 是的,只需像上面的演示那样做console.log("Change event: " + this.id);
。【参考方案3】:
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()">
function fonctionTest()
if (document.getElementById('chk1').checked)
alert("Checked")
else
alert("Not Checked")
【讨论】:
以上是关于引导复选框中的 Onchange 事件的主要内容,如果未能解决你的问题,请参考以下文章
Word CheckBox ContentContol OnChange 事件
onchange oninput 区别&removeempty