Javascript 启动复选框中的Onchange事件_Javascript_Jquery_Html_Checkbox

Javascript 启动复选框中的Onchange事件

javascript jquery html checkbox

Javascript 启动复选框中的Onchange事件,javascript,jquery,html,checkbox,Javascript,Jquery,Html,Checkbox,我正在尝试拦截和处理引导复选框中的更改，并添加了一个“onchange”事件。不幸的是，我没有成功。目前，我有一个按钮，可以改变复选框的状态，这是工作任何暗示都将不胜感激 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

我正在尝试拦截和处理引导复选框中的更改，并添加了一个“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>


自举开关
API与输入
这也意味着使用API或输入来触发事件将以两种方式工作
通过API打开
按API关闭
$（函数（）{
$（'input:checkbox'）.change（function（）{
$（'#控制台事件'）.html（'Toggle:'+$（this.prop（'checked'））
})
})
函数功能测试（）{
log（“这是一个测试”）；
}               
功能切换开关（选择器、状态）{
控制台日志（“元素：+选择器”）；
console.log（$（selector.prop（'checked'））；
$（选择器）.bootstraptogle（状态）；
}
函数toggleOn（）{
$（'chk1'）.bootstrapToggle（'on'）；
isOnOrOff（）；
}
函数toggleOff（）{
$（'chk1'）.bootstrapToggle（'off'）；
isOnOrOff（）；
}
函数isOnOrOff（）{
var c=document.getElementById（'chk1'）；
控制台日志（c.checked）；
}


函数功能测试（）{
if（document.getElementById（'chk1'）。选中）
{
警报（“已检查”）
}否则
{
警报（“未检查”）
}
}

文档中说要使用jQuery

演示：

$（'#chk1'）。更改（函数（）{
警报（$（this.prop（'checked'））
})

它适用于所有复选框，如下例所示：

$（'input:checkbox'）。更改（函数（）{
$（'#控制台事件'）.html（'Toggle:'+$（this.prop（'checked'））；
日志（“更改事件：+this.id”）；
})

请共享您用于复选框的插件链接？'js/bootstrap toggle.js'的链接为。这是您所需要的吗？中提到的更改事件对您不起作用？该示例起作用，但由于我添加了3个复选框，现在我有了chk1、chk2、chk3和chk4，onchange事件似乎对我不起作用。检查下面显示的示例…很抱歉这个愚蠢的问题，但是我应该在标记之间插入$（'input:checkbox'）.change（function（）{$（'#console event'）.html（'Toggle:'+$（this.prop（'checked'））}）？我已经编辑了代码以考虑您的评论。非常感谢你帮我解决这个问题。最好是最后一个问题，如果我写一些类似console.log（“更改事件：+$（this））；我是否有可能知道是谁触发了更改（chk1、chk2、chk3或chk4）？是的，只需执行

console.log（“更改事件：+this.id”）如上面的演示所示。
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()"> 

function fonctionTest(){
  if (document.getElementById('chk1').checked) 
  {
      alert("Checked")
  } else 
  {
      alert("Not Checked")
  }
}