javascriptjqueryicheck

iCheck Plugin - How to hide buttons if all checkboxes are unchecked

I am trying to hide all the buttons for messages if all checkboxes are unchecked. The problem is I am using a plugin call iCheck, and some script don't work because I'm not referencing to the plugin. So I had to use their callback functions to make it work. But this particular problem I cannot solve. Most of the solution I saw was for those that are not using plugin for their checkboxes. Don't know how to apply it with this one. What happens here is if I check one checkbox it shows the buttons. But if check another one (now I have two ticked checkboxes) and unchecked the other one, it hides the buttons. I assume that It hides because it listens to changes on just one checkbox. Now how do I check if all checkboxes are unchecked before hiding the buttons.

These are my codes 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>

Checkbox (which is inside the table and on separate container)

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

Script

$(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 output

Solution

  • You can check the length of the checkbox and based on that you can try to show and hide. Try the below snippet

    $(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>