Alexis Alexis - 1 month ago 5
Javascript Question

How to make button visible after more than one checkbox checked

I have a table and it has checkbox what I want is when more than two checkboxes are selected my button should be visible and vice versa

this is my code

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


And this is my table htmk

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


first it is disabled but when I click on two checkboxes nothing happens :\

Answer

Use change event to check if 2 or more checkbox are checked

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