引导切换 - 值更改和数组生成答案

【问题标题】：bootstrap toggle - value change and array generation引导切换 - 值更改和数组生成
【发布时间】：2016-01-15 11:55:44
【问题描述】：

我正在尝试在我的一个个人项目中使用 bootstrap-toggle 插件。一切都很好，很漂亮，可以像宣传的那样工作，只是它没有。

我的意思是动画效果很好，但底层输入不会改变/切换状态变化。

这是我的代码：

        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="1">mango
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="2">strawberries
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="3">tangerine
        </label>
        </div>
        <div class="checkbox">
        <label>
        <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="4">peach
        </label>
        </div>
        <div class="checkbox">
        <label>
<input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="5">pineapple
        </label>
        </div>

我需要做的是单击切换底层复选框“已选中”属性，然后获取所有选中的复选框并将它们放入数组以进行 ajax 操作。我想它很简单：

var arr = [];    
$('element').on('click',function(){
        $('.filter-toggle input[type="checkbox"]:checked').each(function(){
         arr.push($(this).val());
        });
    });

显然不是，否则我不会在这里，官方文档和示例根本没有帮助。

简而言之，使用 bootstrap-toggle 插件，我如何选中/取消选中底层复选框并将值放入 js 数组？

谢谢

【问题讨论】：

标签： jquery twitter-bootstrap checkbox toggle

【解决方案1】：

试试这个...

var arr = [];
$("#btnFind").on("click", function() {
  $(".filter-toggle").each(function() {
    if ($(this).prop('checked')) {      
      arr.push($(this).val());
    }
  });
});

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
</head>


<div class="checkbox">
  <label>
    <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="1">mango
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="2">strawberries
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="3">tangerine
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="4">peach
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" checked data-toggle="toggle" class="filter-toggle" value="5">pineapple
  </label>
</div>
<input id="btnFind" type="button" value="Find Selected" class="btn btn-success" />

</html>

【讨论】：

这行得通，但我想我忘了指定我需要它在每个按钮切换后即时发生，而不需要我们额外的按钮
这也是可能的，但我认为如果你将它推送到客户端的数组中，你可以在需要更好的性能时立即执行。