I design my checkbox with icheck plugin and worked with one and multiple checkbox(Check all) like this :
HTML :
<div>Using Check all function</div>
<div id="action" class="action-class" style="display:none">SHOW ME</div>
<div id="selectCheckBox">
<input type="checkbox" class="all" />Select All
<input type="checkbox" class="check" />Check Box 1
<input type="checkbox" class="check" />Check Box 2
<input type="checkbox" class="check" />Check Box 3
<input type="checkbox" class="check" />Check Box 4
</div>
JS:
$(function () {
var checkAll = $('input.all');
var checkboxes = $('input.check');
$('input').iCheck();
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
} else {
checkboxes.iCheck('uncheck');
}
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
});
});
I have <div id="action" class="action-class" style="display:none">SHOW ME</div>
and display:none
.
Now, I need to show div
if checked any checkbox(all and one) input.
how do can I show this!?
DEMO JSFIDDLE
Can do something like this that toggles the div based on whether or not any boxes are checked
function toggleDiv(){
var showDiv=checkboxes.filter(':checked').length;
$('#action').toggle(showDiv); /* if boolean argument, toggle will hide/show based on boolean */
}
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
toggleDiv();
});
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
} else {
checkAll.removeProp('checked');
}
checkAll.iCheck('update');
//Add this -----------------------------------
if(checkboxes.filter(':checked').length > 0) {
$("#action").show();
}
else{
$("#action").hide();
}
});
Demo : jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.