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
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);
});
});
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');
}
});
});
updated your fiddle - [ http://jsfiddle.net/URAcy/6/ ]
It should be
$('#rowSelectAll').on('switch-change', function(){....}