jquery - 如何使用 Bootstrap Toggle 切换另一个 Bootstrap Toggle

Question

我在使用 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库文件路径是否正确。否则文件将不会被包含，您的代码将无法工作。

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