Reputation: 4142
I'm trying to show the upload proof
button if any one/two or all three of checkbox is checked and hide only if all of the checkbox is uncheck.
How can I go about this?
.container {
margin-top: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<label class="checkbox"> Age<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
<label class="checkbox"> Photo<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
<label class="checkbox"> Address<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
</div>
<div class="12">
<div class="collapse" id="proof">
<a href="#" class="btn btn-block btn-primary">Upload Proof</a>
</div>
</div>
</div>
</div>
Upvotes: 0
Views: 1634
Reputation: 536
$(function() {
$( "input" ).click(function() {
var checked = $("input:checked").length;
if (checked == 0) {
$('#proof').hide();
} else {
$('#proof').show();
}
});
});
.container {
margin-top: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<label class="checkbox"> Age<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
<label class="checkbox"> Photo<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
<label class="checkbox"> Address<input type="checkbox" data-toggle="collapse" data-target="#proof"></label>
</div>
<div class="12">
<div class="collapse" id="proof">
<a href="#" class="btn btn-block btn-primary">Upload Proof</a>
</div>
</div>
</div>
</div>
Upvotes: 1
Reputation: 549
Here is working code we can check the count of checked checkboxes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<label class="checkbox"> Age<input type="checkbox" class="checkbox_class"></label>
<label class="checkbox"> Photo<input type="checkbox" class="checkbox_class"></label>
<label class="checkbox"> Address<input type="checkbox" class="checkbox_class"></label>
</div>
<div class="12">
<div class="upload_proof hide">
<a href="#" class="btn btn-block btn-primary">Upload Proof</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("input[type='checkbox']").change(function(event) {
if ($("input:checkbox:checked").length > 0)
{
if($(".upload_proof").hasClass("hide")){
$(".upload_proof").removeClass("hide")
}
}else{
if(! $(".upload_proof").hasClass("hide")){
$(".upload_proof").addClass("hide")
}
}
})
})
</script>
Hope It will help you. Let me know in case of any problem.
Upvotes: 1