Javascript 引导程序复选框中的 Onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38260431/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 21:15:27 来源:igfitidea点击:
Onchange event in a bootstrap checkbox
提问by Laurent
I am trying to intercept and handle changes in a bootstrap checkbox and I have added an 'onchange' event. Unfortunately, I was not successful. Currently, I have a button which can change the state of the checkbox and this is working.
我正在尝试拦截和处理引导复选框中的更改，并且我添加了一个“onchange”事件。不幸的是，我没有成功。目前，我有一个按钮可以更改复选框的状态，并且正在运行。
Any hint would be much appreciated.
任何提示将不胜感激。
<!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>
回答by BenG
The documentation says to use jQuery change.
文档说要使用 jQuery change。
Demo:
演示：
$('#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">回答by pala?н
Its working for all the checkboxes as shown in the examples below:
它适用于所有复选框，如下例所示：
$('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>EDIT:
编辑：
Add the code like:
添加如下代码：
<script>
$(function() {
$('input:checkbox').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
回答by S M
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()">
function fonctionTest(){
if (document.getElementById('chk1').checked)
{
alert("Checked")
} else
{
alert("Not Checked")
}
}
