Question

我使用http://www.bootstraptoggle.com/中的bootstraptoggle将复选框转换为切换。我已经将他们的cdn包含在脚本和css中。

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

非常感谢。

Answer 1

在修复你的jquery之前......

$('ul.list-group1 li').on('click', function() {
 var $cb = $(this).find(":checkbox");
 if (!$cb.prop("checked")) {
    $cb.prop("checked", true);
 } else {
    $cb.prop("checked", false);
 }
});

$('ul.list-group1 li input').on('click', function(event) {
   event.stopPropagation();
});

Answer 2

您没有正确导入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>

Bootstrap切换不工作onclick LI元素

2 个答案: