Bootstrap Switch，全局复选框到（取消选中所有其他答案

【问题标题】：Bootstrap Switch, global checkbox to (un)check all otherBootstrap Switch，全局复选框到（取消选中所有其他
【发布时间】：2013-09-20 07:21:50
【问题描述】：

我正在为 Twitter Bootstrap 使用 Bootstrap Switch。在这里，我有问题根据选中或未选中的全局复选框选中或取消选中所有复选框

这里是引导开关链接http://www.bootstrap-switch.org/

这是我所做的

<!-- this is the global checkbox -->
<div class="make-switch switch-mini">
    <input type="checkbox" id="rowSelectAll">
</div>

<!-- row checkboxs -->
<div class="make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>

jQuery:

$("#rowSelectAll").click(function () {
    $(".row-select").prop('checked', $(this).prop('checked'));
});

编辑：尝试只使用一个全局复选框和一个本地复选框

<div class="make-switch switch-mini">
    <input type="checkbox" id="rowSelectAll">
</div>

<div id="toggle-state-switch" class="make-switch switch-mini row-select">
    <input type="checkbox" class="">
</div>

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

试试这个，应该可以的。另请参阅此 jsfiddle...http://jsfiddle.net/URAcy/5/

  <!-- this is the global checkbox -->
<div class="make-switch switch-mini" id="rowSelectAll">
    <input type="checkbox" id="rowSelectAllc">
</div>

<!-- row checkboxs -->
<div class="make-switch switch-mini toggle-state-switch">
    <input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini toggle-state-switch">
    <input type="checkbox" class="row-select">
</div>
<div class="make-switch switch-mini toggle-state-switch">
    <input type="checkbox" class="row-select">
</div>

JS：

$('#rowSelectAll').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
        $('.toggle-state-switch').each(function( index ) {
      $(this).bootstrapSwitch('setState' , value);
    });
});

【讨论】：

嗨尼基尔。谢谢你的回答，但它不能正常工作。有时它选择全部，有时则不选择。取消选中事件永远不会起作用，但只会检查偶数，有时也

【解决方案2】：

试试这个：

 <!-- this is the global checkbox -->
<div class="make-switch switch-mini">
    <input type="checkbox" id="rowSelectAll">
</div>

<!-- row checkboxs -->
<div class="myswitch make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>
<div class="myswitch make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>
<div class="myswitch make-switch switch-mini">
    <input type="checkbox" class="row-select">
</div>

然后在你的脚本中

    $('#rowSelectAll').on('change', function(){
    $('.myswitch').each(function(){

        if($(this).hasClass('switch-on')){
            $(this).bootstrapSwitch('setState' , false);
            $(this).removeClass('switch-on');
        }else{

       $(this).bootstrapSwitch('setState' , true);
        $(this).addClass('switch-on');
        }
    });
});

【讨论】：

不，不工作..我找到了一些事件处理程序，但不知道它是如何工作的..您可能会更好地理解它并可以帮助实现它..bootstrap-switch.org/#event-handler-javascript
@pixelngrain ，这就是我指的你。请查看我的更新答案，看看它是否会起作用
我应该在全局复选框上添加对吗？在那种情况下，它仍然不起作用。
@pixelngrain 抱歉我忘记更新了。请现在再检查一遍
很抱歉，但这也不起作用。我什至尝试使用类，但没有任何反应

【解决方案3】：

更新了你的小提琴 - [http://jsfiddle.net/URAcy/6/]

应该是

$('#rowSelectAll').on('switch-change', function(){....}

【讨论】：