Bootstrap Switch, global checkbox to (un)check all other

后端 未结 3 909
走了就别回头了
走了就别回头了 2021-01-12 00:18

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

Here is the boo

相关标签:
3条回答
  • 2021-01-12 00:34

    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);
        });
    });
    
    0 讨论(0)
  • 2021-01-12 00:45

    Try this:

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

    then in your script

        $('#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');
            }
        });
    });
    
    0 讨论(0)
  • 2021-01-12 00:51

    updated your fiddle - [ http://jsfiddle.net/URAcy/6/ ]

    It should be

    $('#rowSelectAll').on('switch-change', function(){....}
    
    0 讨论(0)
提交回复
热议问题