Today, We want to share with you select all checkbox jquery.In this post we will show you check uncheck all checkbox jquery, hear for Select All Checkbox Elements At Once we will give you demo and example for implement.In this post, we will learn about Check Uncheck All Checkboxes Using JQuery Selectors with an example.

Select / Deselect all checkboxes using jQuery

Contents

A quick little jQuery source code in order to select all checkboxes in a list of checkboxes. deselect “checked all”, if one of the listed checkbox product is unchecked amd select “checked all” if all of the listed checkbox product is checked.

Example 1: index.html

<html lang="en">
<head>
    <title>Select and deselect all checkboxes using jquery - www.pakainfo.com</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <ul>
    <li><input name="product_all" class="all_products" type="checkbox">Select All</li>
    <li><input value="1" name="product" class="checkbox" type="checkbox">Laptop 1  </li>
    <li> <input value="2" name="product" class="checkbox" type="checkbox">Mobile 2  </li>
    <li><input value="3" name="product" class="checkbox" type="checkbox">Computer 3  </li>
    <li><input value="4" name="product" class="checkbox" type="checkbox">Iphone 4  </li>
    <li><input value="5" name="product" class="checkbox" type="checkbox">Pendrive 5 </li>
   </ul>
    <script type="text/javascript">
        $('.all_products').on('change', function() {     
                $('.checkbox').prop('checked', $(this).prop("checked"));              
        });

        $('.checkbox').change(function(){ //".checkbox" change 
            if($('.checkbox:checked').length == $('.checkbox').length){
                   $('.all_products').prop('checked',true);
            }else{
                   $('.all_products').prop('checked',false);
            }
        });
    </script>
</body>
</html>

Example 2:
The HTML code is given below

<div class="row">
    <div class="col-md-3 "> 
        Select All : <input id="checkall" class='' type="checkbox" >
    </div>
   
    <div class="col-md-3" >
        Checkbox 1 :<input value="1" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>
    <div class="col-md-3" >
        Checkbox 2 :<input value="2" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>
    <div class="col-md-3" >
        Checkbox 3 :<input value="3" class='checkboxes' type="checkbox" name="checkboxes[]">
    </div>

</div>

The Jquery Code is given below.

 $("#checkall").click(function (){
     if ($("#checkall").is(':checked')){
        $(".checkboxes").each(function (){
           $(this).prop("checked", true);
           });
        }else{
           $(".checkboxes").each(function (){
                $(this).prop("checked", false);
           });
        }
 });

I hope you get an idea about jquery select all checkboxes in table.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Select / Deselect all checkboxes using jQuery

Related posts: