vendredi 7 août 2015

how to show/hide elements based on number of checkbox checked using jquery/javascript?

i want to show all the buttons listed in class when number of checked boxes becomes 1 and by default i am showing only add folder and upload , when user selects 2 check boxes the share button should be hidden , and when it un checks 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 as selection of 2 check boxes. kindly help.

here is my 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();
                }


            });
        });




Aucun commentaire:

Enregistrer un commentaire