9

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'));
});

編集: 1 つのグローバル チェックボックスと 1 つのローカル チェックボックスだけを試してみました

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

3 に答える 3

7

これを試してみてください。うまくいくはずです。この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);
    });
});
于 2013-09-20T08:00:12.160 に答える
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');
        }
    });
});
于 2013-09-20T07:29:12.787 に答える
1

あなたのフィドルを更新しました - [ http://jsfiddle.net/URAcy/6/ ]

そのはず

$('#rowSelectAll').on('switch-change', function(){....}
于 2013-10-25T09:35:34.583 に答える