jquery - Bootstrap Toggle在onclick LI元素上不起作用

我正在使用http://www.bootstraptoggle.com/中的bootstraptoggle将复选框转换为切换。我已经为脚本和CSS包括了他们的CDN。

https://jsfiddle.net/j04x6sjm/4/

在<li>one</li>上，我通过<input type="checkbox" data-toggle="toggle" />调用了切换功能，但是由于某种原因，它没有显示在填充框中。它在本地工作。因此，我要实现的是能够在单击<li>或复选框本身时选中/取消选中复选框。我可以用小提琴中的脚本来实现普通复选框的功能。如何将其也应用于切换的复选框？切换的类复选框也应在相应的<li>单击上选中/取消选中。

非常感谢。

最佳答案

您没有正确导入CSS。我已经导入了它们，现在可以正常工作了。您可以使用.bootstrapToggle('toggle')方法手动切换开关（来自官方页面）。

$('.list-group-item1-text').click(function() {
    var $cb = $(this).parent().find(":checkbox");
    $cb.bootstrapToggle('toggle');
    //if (!$cb.prop("checked")) {
      //  $cb.prop("checked", true);
    //} else {
    //    $cb.prop("checked", false);
});

ul{
  list-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<ul class="list-group1">
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text" >One</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Two</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Three</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Four</span>
  </li>
  <li class="list-group-item1">
    <input type="checkbox" data-toggle="toggle" />
    <span class="list-group-item1-text">Five</span>
  </li>
</ul>