自举复选框中的Onchange事件

我试图截取并处理引导复选框中的更改，并添加了“onchange”事件。不幸的是，我没有成功。目前，我有一个按钮，可以更改复选框的状态，这是工作。自举复选框中的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>

来源

2016-07-08 Laurent

请分享你正在使用复选框插件的链接？ –

'js/bootstrap-toggle.js'的链接是http://www.bootstraptoggle.com/。这是你需要的吗？ – Laurent

[示例]（http://www.bootstraptoggle.com/#events）中提到的更改事件不适合您？ –

文档说使用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">

来源

2016-07-08 06:54:31 BenG

<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()"> 

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

来源

2016-07-08 06:48:55

谢谢，但它不适用于我。 – Laurent

控制台中的任何错误？ –

控制台上绝对没有错误 – Laurent

其工作为如实施例中所示的以下所有复选框：

$('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>

来源

2016-07-08 07:00:15

对不起，我应该在哪里插入 $（'input：checkbox'）。change（function ：'+ $（this）.prop（'checked'）） }）

11. jQuery的复选框的onchange

12. 的Javascript复选框的onchange

13. 选择框onchange事件的AJAX代码

14. 触发选择框的onchange事件

15. 阵营的自举：对的onChange“选择”

16. 没有onclick或onchange事件的复选框状态

17. 动态复选框插入，jQuery的onchange事件失去

18. 复选框使用onchange

19. 动态复选框onchange＆javascript

20. 当在reactjs复选框上使用onChange事件时，'this'为null

21. 当onClick或onChange时复选框未触发事件

22. onchange事件不火对铬ASP复选框仅

23. jQuery自动触发复选框事件

24. 自定义选择框多次触发onchange事件

25. 如何“恢复”onchange事件

26. 复选框的onkeyup事件

27. 的onclick复选框事件

28. html复选框onChange方法在PHP中

29. CakePHP中选择框的onchange事件的问题

30. HTML中的选择框Onchange事件的问题

自举复选框中的Onchange事件

回答

相关问题