Geek Answers Handbook

Bootstrap Switch, a global checkbox for (un) check all others

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

Here is the bootstrap switch link http://www.bootstrap-switch.org/

Here is what i did

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

EDIT: tried only one global and one local flag

 <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>
+8
jquery twitter-bootstrap
source share
3 answers

Try this, 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); }); });
+7
source share

Try the following:

  <!-- 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 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'); } }); });
+2
source share

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

It should be

 $('#rowSelectAll').on('switch-change', function(){....}
+1
source share

More articles:


All Articles