如何根据选中的复选框数量显示/隐藏元素？

Question

I want to show all the buttons listed in class when number of checked boxes becomes 1. By default I am showing only add folder and upload.

When a user selects 2 checkboxes, the share button should be hidden, and when it unchecks it, it should again be visible.

Both the things are working fine according to my code but the problem arises when user checks more than 2 checkboxes , it should work when two checkboxes are selected.

HTML-code:

<ul class="head-btn">
                <li><a href="" class="addfolder"><i class=" fa fa-plus icon-bgs"></i>Add Folder</a>  </li>
                <li ><a href="" class="upload"><i class=" fa fa-cloud-upload icon-bgs"></i>Upload</a>  </li>
                <li ><a href="" class="share"><i class=" fa fa-user icon-bgs"></i>Share</a>  </li>
                <li ><a href="" class="download"><i class=" fa fa-cloud-download icon-bgs"></i>Download</a>  </li>
            </ul>

<div class="doclist-cont">

    <div class="list-group">

        <div class="list-group-item">
            <div class="checkbox"><label><input type="checkbox"></label></div>
            <i class="fa fa-folder-open-o folder"></i>
            <span class="name" >Introduction Document </span>
            <span class="left-more-icon"></span>
        </div>


        <div class="list-group-item">
            <div class="checkbox"><label><input type="checkbox"></label></div>
            <i class="fa fa-folder-open-o folder"></i>
            <span class="name" >Platform details document</span>
            <span class="right-more-icon"></span>

        </div>
        <div class="list-group-item">
            <div class="checkbox"><label><input type="checkbox"></label></div>
            <i class="fa fa-file-word-o word"></i>
            <span class="name" >Station list.docx</span>
            <span class="text-muted">Jul 21, 2015  |  25 KB</span>
            <span class="right-more-icon"></span>
        </div>
        <div class="list-group-item">
            <div class="checkbox"><label><input type="checkbox"></label></div>
            <i class="fa  fa-file-pdf-o pdf-icon"></i>
            <span class="name" >Platform details document</span>
            <span class="text-muted">Jul 21, 2015  |  25 KB</span>
            <span class="right-more-icon"></span>
        </div>
    </div>

here is my jquery code:

 $(document).ready(function() {

            $('.share').hide();
            $('.download').hide();
            var counter=0;
            var totalCheckboxes = $('input:checkbox').length;
            $('input[type="checkbox"]').click(function(){
                var numberOfChecked = $('input:checkbox:checked').length;
                if(($(this).prop("checked") == true && numberOfChecked ==1))
                {
                    $('.share').show();
                    $('.download').show();


                }
                else if($(this).prop("checked") == false && numberOfChecked !=1)
                {
                    $('.share').hide();
                    $('.download').hide();
                }
                else if(($(this).prop("checked") == true && numberOfChecked >1)){
                    $(".share").hide();

                }

                else if(($(this).prop("checked") == false && numberOfChecked ==1)){
                    $(".share").show();
                }


            });
        });

Answer 1

I have simplified your code a bit. I think it meets all your conditions now and it's bit easier to read (although I'm not sure what do you mean by "it should work when two checkboxes are selected" as it's not clear what do you mean).

Here are the conditional statements:

     if (numberOfChecked == 0) {
         $('.share').hide();
         $('.download').hide();
     } else if (numberOfChecked == 1) {
         $('.share').show();
         $('.download').show();
     } else if (numberOfChecked >= 2) {
         $(".share").hide();
         $('.download').show(); //not really needed but added for clarity 
     }

and a FIDDLE : https://jsfiddle.net/82rdkkdh/1/