仅当取消选中所有复选框时，引导 4 才会折叠以工作

Question

如果选中复选框中的任何一个/两个或所有三个，我正在尝试显示upload proof按钮，并且仅在取消选中所有复选框时才隐藏。

我该怎么做？

.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>

Answer 1

这是工作代码，我们可以检查选中复选框的计数

<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>

希望它能帮助你。如果有任何问题，请告诉我。

Answer 2

$(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>