I customized my checkboxes using the icheck plugin to work with both single and multiple checkboxes, including a "Check all" option. Here is an example of how it looks in HTML:
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>display:none.
My current requirement is to display the div element only if any checkbox input is checked.
How can I achieve this?
DEMO JSFIDDLE