Bootstrap Switch，全局复选框以(取消)选中所有其他 [英] Bootstrap Switch, global checkbox to (un)check all other

问题描述

我正在将Bootstrap Switch用于Twitter Bootstrap.在这里，根据全局复选框的选中或未选中状态，我无法选中或取消选中所有复选框

I am using Bootstrap Switch for Twitter Bootstrap. Here I have problem to check or uncheck all checkbox based on global checkbox checked or unchecked

这是引导程序链接 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'));
});

仅尝试使用一个全局复选框和一个本地复选框

tried with only one global and one local checkbox

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

推荐答案

尝试这个，它应该可以工作.另请参阅此jsfiddle ... http://jsfiddle.net/URAcy/5/

Try this one, it should work. Also see this 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);
    });
});

这篇关于Bootstrap Switch，全局复选框以(取消)选中所有其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！