iCheck 插件 - 如果所有复选框都未选中，如何隐藏按钮

编程问答 2022-05-12

问题描述

如果未选中所有复选框，我将尝试隐藏所有消息按钮。问题是我正在使用插件调用 iCheck，有些脚本不起作用，因为我没有引用插件。所以我不得不使用他们的回调函数来让它工作。但是这个特殊的问题我无法解决。我看到的大多数解决方案都是针对那些没有为复选框使用插件的人的。不知道如何应用它。 这里发生的情况是，如果我选中一个复选框，它会显示按钮。但是如果检查另一个（现在我有两个勾选的复选框）并取消选中另一个，它会隐藏按钮。我假设它隐藏是因为它只监听一个复选框的变化。现在如何在隐藏按钮之前检查是否所有复选框都未选中。

这些是我的代码 HTML

<div class="mail-tools tooltip-demo m-t-md">
    <div class="btn-group float-right">
        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
    </div>
    <a href="mailBox.PHP" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh InBox"><i class="fa fa-refresh"></i> Refresh</a>
    <button class="btn btn-white btn-sm" id="mark-as-read" data-toggle="tooltip" data-placement="top" title="Mark as read/unread"><i class="fa fa-eye"></i> </button>
    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
    <?PHP
        if(isset($_GET['d'])){
            $title = "Delete permanently";
        }else{
            $title = "Move to trash";
        }
    ?>
    <button type="submit" name="deleteMessage" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="<?PHP echo $title; ?>"><i class="fa fa-trash-o"></i> </button>
</div>

复选框（在表格内和单独的容器上）

<td class="check-mail">
    <input type="checkBox" class="i-checks messageID" name="messageID" value="<?PHP echo $message['messageID']; ?>">
</td>

脚本

$(document).ready(function(){
        $('.i-checks').iCheck({
            checkBoxClass: 'icheckBox_square-green',radioClass: 'iradio_square-green'
        });

        $('.messageID').on('ifClicked',function(){
        $('.messageID').on('ifChecked',function(){
            $('.mail-tools').children('button').show();
        });
        $('.messageID').on('ifUnchecked',function(){
            $('.mail-tools').children('button').hide();
        });
    });
});

输出

output

解决方法

您可以检查复选框的长度，并根据该长度尝试显示和隐藏。试试下面的代码片段

$(document).ready(function(){
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',radioClass: 'iradio_square-green'
    });

    $('.messageID').on('ifChecked ifUnchecked',function (event) {
        if ($('.messageID').filter(':checked').length == 0 ) {
            $('.mail-tools').children('button').hide();
        }else{
            $('.mail-tools').children('button').show();
        }
    });
});
.mail-tools button{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<div class="mail-tools tooltip-demo m-t-md">
    <div class="btn-group float-right">
        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
        <button class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
    </div>
    <a href="mailbox.php" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Refresh Inbox"><i class="fa fa-refresh"></i> Refresh</a>
    <button class="btn btn-white btn-sm" id="mark-as-read" data-toggle="tooltip" data-placement="top" title="Mark as read/unread"><i class="fa fa-eye"></i> </button>
    <button class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Mark as important"><i class="fa fa-exclamation"></i> </button>
    
    <button type="submit" name="deleteMessage" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="<?php echo $title; ?>"><i class="fa fa-trash-o"></i> </button>
</div>
<td class="check-mail">
    <input type="checkbox" class="i-checks messageID" name="messageID" value="<?php echo $message['messageID']; ?>">
</td>
<td class="check-mail">
    <input type="checkbox" class="i-checks messageID" name="messageID" value="<?php echo $message['messageID']; ?>">
</td>
<td class="check-mail">
    <input type="checkbox" class="i-checks messageID" name="messageID" value="<?php echo $message['messageID']; ?>">
</td>

icheckjavascriptjquery