jQuery使用icheck插件在多个复选框中显示隐藏div答案

【问题标题】：jQuery show hide div in multiple checkbox using icheck pluginjQuery使用icheck插件在多个复选框中显示隐藏div
【发布时间】：2014-10-01 16:46:16
【问题描述】：

我使用 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

【问题讨论】：

标签： javascript jquery html css icheck

【解决方案1】：

可以做这样的事情，根据是否选中任何框来切换 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();

});

DEMO

【讨论】：

这不是真的！请先单击检查所有您看到的div(true)，然后单击复选框 4 u hide div 这不是真的，因为我们有 3 个复选框 (1 - 2- 3)。

【解决方案2】：

    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();
        }
   });

演示：jsfiddle

【讨论】：