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

【问题标题】：How to show/hide elements based on number of checkbox checked?如何根据选中的复选框数量显示/隐藏元素？
【发布时间】：2015-08-07 12:16:15
【问题描述】：

当复选框的数量变为 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();
                }


            });
        });

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案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/

【讨论】：