我使用 icheck 插件设计我的复选框,并像这样使用一个和多个复选框(全部选中):
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');
});
});
我有<div id="action" class="action-class" style="display:none">SHOW ME</div>
和 display:none
.
现在,我需要显示 div
如果选中任何复选框(全部和一个)输入。
我怎样才能显示这个!?
演示 JSFIDDLE
最佳答案
可以做这样的事情,根据是否选中任何框来切换 div
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();
});
关于javascript - jQuery 使用 icheck 插件在多个复选框中显示隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26146373/