如何使用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">

- Liam

Answer 1

1.在任何其他js库之前，需要先添加jQuery库。

2.检查jQuery库文件路径是否正确。否则文件将无法包含，您的代码将无法工作。

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">

- Alive to die - Anant