How to show and hide an element in three or more conditions using jQuery?

$(document).ready(function(){
  
    $(".counter-alert-box").hide();
    
        $('.scheme-checkbox').on("click", function () {
            $('.scheme-checkbox').is('checked', this.checked);
            $('.counter-alert-box').show();                        
        });
  
        //Alert Box Functionality : Show Alert Box on - first Checked
        $(".close-counter-box1").click(function () {
            $(".counter-alert-box").hide();
        });
  
        //Alert Box Functionality : Removes Selected Scheme
        $(".selected-scheme .close-icon-scheme").click(function () {
            $(this).parents('.selected-scheme').remove();
        });
  
    });

input[type=checkbox]{

position: absolute;
  right:20px;
  top:50px;
}

.counter-alert-box{
width:300px;
  height:250px;
  background-color:lightgray;
  position:fixed;
  left:30%;
  bottom:10px;
}

.close-counter-box1{
position:absolute;
  right:3px;
  top:1px;
  padding:3px;
  border:gray;
  background-color:lightgray;
  color:#000;
}

.close-counter-box1:hover{
background-color:lightgreen;
  color:red;
}

.selected-scheme{

}

.close-icon-scheme {
    color: #6C6C6C;
    /*background-color: #C0C0C0;*/
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin-right: 7px;
    padding:3px;
}

.close-icon-scheme:hover {
    color: #181818;
    background-color: #FFF;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head></head>      
    <body>        
        <fieldset>
            <legend>Scheme 1</legend>
            <p>Scheme 1 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 2</legend>
            <p>Scheme 2 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 3</legend>
            <p>Scheme 1 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>
        <fieldset>
            <legend>Scheme 4</legend>
            <p>Scheme 4 Details</p>
            <input type="checkbox" class="scheme-checkbox">
        </fieldset>        
        <div class="counter-alert-box">
            <span class='close-counter-box1'>X</span>
            <div class='schemes-wrapper'>      
                <div class='selected-scheme'>Scheme 1
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 2
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 3
                    <span class='close-icon-scheme'>X</span>
                </div>
                <div class='selected-scheme'>Scheme 4
                    <span class='close-icon-scheme'>X</span>
                </div>
            </div>      
        </div>        
    </body>
</html>

I am working in PHP and fetching data from database with foreach loop. So on fieldset and its content comes from database. I am using jQuery with that.

I want to work on Counter-alert-box class to show or hide as per following condition but unable to do so please consider following condition and give solution:

counter-alert-box should be 'Hide' :

When all checkboxes with class scheme-checkbox, will unchecked.
When all selected-schemes removes from div class schemes-wrapper.
When clicks on close-counter-box1

counter-alert-box should be 'show' when at least 1 checkbox is get checked any of one.

Solution

Please check the below fiddle and see. I think this will help you...

    <fieldset>
    <legend>Scheme 1</legend>
    <p>Scheme 1 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 2</legend>
    <p>Scheme 2 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 3</legend>
    <p>Scheme 1 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<fieldset>
    <legend>Scheme 4</legend>
    <p>Scheme 4 Details</p>
    <input type="checkbox" class="scheme-checkbox">
</fieldset>
<div class="counter-alert-box"> <span class='close-counter-box1'>X</span>

    <div class='schemes-wrapper'>
        <div class='selected-scheme'>Scheme 1 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 2 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 3 <span class='close-icon-scheme'>X</span>

        </div>
        <div class='selected-scheme'>Scheme 4 <span class='close-icon-scheme'>X</span>

        </div>
    </div> <span id="cnt"></span>

</div>

$(document).ready(function () {
    $(".counter-alert-box").hide();
    $('.scheme-checkbox:checkbox').change(function () {
        if ($(':checkbox:checked').length > 0) {
            $('.counter-alert-box').show();
        } else {
            $('.counter-alert-box').hide();
        }
    });

    //Alert Box Functionality : Show Alert Box on - first Checked

    $(".close-counter-box1").click(function () {
        $(".counter-alert-box").hide();
        $('.scheme-checkbox').attr('checked', false);
    });

    //Alert Box Functionality : Removes Selected Scheme
    $(".close-icon-scheme").click(function () {
        $(this).parents('.selected-scheme').remove();
        if (!$('.selected-scheme').length) {
            $(".counter-alert-box").hide();
            $('.scheme-checkbox').attr('checked', false);
        }
    });

});


input[type=checkbox] {
    position: absolute;
    right:20px;
    top:50px;
}
.counter-alert-box {
    width:300px;
    height:250px;
    background-color:lightgray;
    position:fixed;
    left:30%;
    bottom:10px;
}
.close-counter-box1 {
    position:absolute;
    right:3px;
    top:1px;
    padding:3px;
    border:gray;
    background-color:lightgray;
    color:#000;
}
.close-counter-box1:hover {
    background-color:lightgreen;
    color:red;
}
.selected-scheme {
}
.close-icon-scheme {
    color: #6C6C6C;
    /*background-color: #C0C0C0;*/
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
    float: left;
    margin-right: 7px;
    padding:3px;
}
.close-icon-scheme:hover {
    color: #181818;
    background-color: #FFF;
    cursor:pointer;
}

JSFiddle