Как показать/скрыть элементы на основе количества флажков?

Question

Я хочу показать все кнопки, перечисленные в классе, когда количество отмеченных ящиков равно 1. По умолчанию я показываю только папку добавления и выгрузки.

Когда пользователь выбирает 2 флажка, кнопка совместного доступа должна быть скрыта, а когда она отменяет ее, она снова должна быть видимой.

Обе вещи работают нормально в соответствии с моим кодом, но проблема возникает, когда пользователь проверяет более 2 флажков, он должен работать, когда выбраны два флажка.

HTML-код:

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

вот мой JQuery код:

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

Я упростил ваш код немного. Я думаю, что он отвечает всем вашим условиям сейчас, и это немного легче читать (хотя я не уверен, что вы подразумеваете под этим «он должен работать, когда выбраны два флажка», поскольку неясно, что вы имеете в виду).

Вот условные операторы:

 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 
    } 

и FIDDLE: https://jsfiddle.net/82rdkkdh/1/