选中多个复选框后如何使按钮可见

Question

我有一个表，并且有一个复选框，当我选择了两个以上的复选框时，我想要的是我的按钮应该可见，反之亦然

JavaScript代码：

$(document).ready(function() {
  if ($("input:checkbox:checked").length > 1) {
    $("#checkerButton").show();
  } else {
    $("#checkerButton").hide();
  }
});

.PHP文件：

<div>
  <form action="" method="POST" id="checkerDeleter">
    <input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton" />
  </form>
</div>
<table class="table table-hover table-responsive">
  <thead>
    <tr>
      <td>Check</td>
      <td>Name</td>
      <td>Description</td>
      <td>Price</td>
      <td>Discount</td>
      <td>Quantity</td>
      <!--<td>Category</td>-->
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <?php while($row = $resultallproducts->fetch_assoc()) { ?>
      <form action="" method="POST">
        <tr>
          <td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>" /></td>
          <td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>" /></td>
          <td><input type="text" name="name" value="<?php echo $row['product_name']; ?>" /></td>
          <td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
          <td><input type="text" name="price" value="<?php echo $row['product_price']; ?>" /></td>
          <td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>" /></td>
          <td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>" /></td>
          <td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update" /></td>
          <td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete" /></td>
        </tr>
      </form>
      <?php } ?>
    </tbody>
  </table>
</div>

首先，它被禁用，但是当我单击两个复选框时，没有任何反应：\\

Answer 1

使用更改事件来检查是否选中了2个或更多复选框

 $(document).ready(function() { if ($("input:checkbox:checked").length > 1) { $("#checkerButton").show(); } else { $("#checkerButton").hide(); } $("input:checkbox").on("change",function(){ if($("input:checkbox:checked").length > 1){ $("#checkerButton").show(); }else{ $("#checkerButton").hide(); } }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <form action="" method="POST" id="checkerDeleter"> <input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton"/> </form> </div> <table class="table table-hover table-responsive"> <thead> <tr> <td>Check</td> <td>Name</td> <td>Description</td> <td>Price</td> <td>Discount</td> <td>Quantity</td> <!--<td>Category</td>--> <td></td> <td></td> </tr> </thead> <tbody> <form action="" method="POST"> <tr> <td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td> <td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td> <td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td> <td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td> <td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td> <td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td> <td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td> <td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td> <td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td> </tr> <tr> <td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td> <td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td> <td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td> <td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td> <td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td> <td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td> <td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td> <td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td> <td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td> </tr> </form> </tbody> </table>