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

使用change event检查是否选中了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>

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

1 个答案: