如何使用Bootstrap Toggle切换其他Bootstrap toggle

Question

我在bootstrap的切换功能上遇到了问题。

这个想法是让复选框(bootstrap切换)切换到第二个复选框(bootstrap切换)打开或关闭。不幸的是，它并没有在网页上起作用。我注意到，通过删除"data-toggle='toggle'“，该函数可以工作，但即使是对onclick()事件的警告也没有响应。

​

function toggleOnByInput() {
    $('#toggle-trigger').prop('checked', true).change()
 }

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="jquery-3.2.1.min.js"></script>
<input 
        type="checkbox" 
        id="week" 
        name="week" 
        data-toggle="toggle"                 
        data-onstyle="success" 
        data-offstyle="warning" 
        data-size="small"
        data-on="Yes" 
        data-off="No"
        onclick="toggleOnByInput()">

<input id="toggle-trigger" type="checkbox" data-toggle="toggle">

​

Answer 1

1.jQuery库需要先添加，再添加其他js库。

2.检查jQuery库文件路径是否为correct.Otherwise文件将不会包含，并且您的代码将无法工作。

3.由于您使用的是bootstrap toogle，因此onclick将无法工作。你必须使用下面的代码：

$('body').on('click','.toggle-group:first',function(){
    $('.toggle-group:last').click();
});

我做了这些更改，代码开始正常工作：

​

$('body').on('click','.toggle-group:first',function(){
  $('.toggle-group:last').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>

<input 
        type="checkbox" 
        id="week" 
        name="week" 
        data-toggle="toggle"                 
        data-onstyle="success" 
        data-offstyle="warning" 
        data-size="small"
        data-on="Yes" 
        data-off="No">

<input id="toggle-trigger" type="checkbox" data-toggle="toggle">

​