logo标签列表

Bootstrap复选框中的Onchange事件

javascriptjqueryhtmlcheckbox
12

我正在尝试拦截和处理Bootstrap复选框的更改，并已添加了“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>
请分享您正在使用的复选框插件链接？ - palaѕн
'js/bootstrap-toggle.js' 的链接是 http://www.bootstraptoggle.com/。这是你需要的吗？ - Laurent
更改事件如示例所述（http://www.bootstraptoggle.com/#events）对您没有起作用吗？ - palaѕн
这个例子之前是可以运行的，但是我添加了三个复选框，现在有chk1、chk2、chk3和chk4，但是onchange事件似乎没有反应。 - Laurent
对我来说似乎是有效的。请检查我下面展示的例子... - palaѕн
4个回答
20

文档中建议使用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">

7

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

$('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')) }) 在<script>标签之间？ - Laurent
1
我已经修改了我的代码，考虑了您的意见。 非常感谢您帮助解决我的问题。 最好的祝愿。 - Laurent
最后一个问题，如果我写了类似console.log("Change event: " + $(this));这样的代码，我有可能知道是哪个元素触发了变化（chk1、chk2、chk3还是chk4）吗？ - Laurent
是的，就像上面的演示一样，只需执行 console.log("Change event: " + this.id);。 - palaѕн
5
<input id="chk1" type="checkbox" data-toggle="toggle" onclick="fonctionTest()"> 

function fonctionTest(){
  if (document.getElementById('chk1').checked) 
  {
      alert("Checked")
  } else 
  {
      alert("Not Checked")
  }
}
0
如果您不想使用jQuery，可以在运行onChange函数时添加事件监听器，如下所示：
onChange={(event) => {alert("Box Checked")}}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接