只有取消选中所有复选框，Bootstrap 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>