Question

我希望在复选框的数量变为1时显示课程中列出的所有按钮。默认情况下，我只显示添加文件夹和上传。

当用户选择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

我已经简化了你的代码了。我认为它现在符合你的所有条件而且阅读起来更容易一些（虽然我不确定你的意思是什么＆＃34;当选择了两个复选框时它应该工作＆＃34;因为它＆＃34 39;不清楚你的意思是什么。）

以下是条件陈述：

     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/

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

1 个答案: