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