How to do select all checkbox using jQuery – fast & simple

How to do select all checkbox using jQuery. Here we’ll discuss both select all and deselect all checkbox using jQuery.

Most of the time we may need to implement select all or deselect all checkbox. To do this the easiest and simple way is using jQuery. This tutorial will help you to complete the task.

OUTPUT :-

Select all
Check 1
Check 2
Check 3
Check 4
Check 5

HTML :-

<table>
    <tr>
        <th><input type="checkbox" id="select_all"/> Select all</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="check" value="1"/> Check 1</td>
        <td><input type="checkbox" class="check" value="2"/> Check 2</td>
        <td><input type="checkbox" class="check" value="3"/> Check 3</td>
        <td><input type="checkbox" class="check" value="4"/> Check 4</td>
        <td><input type="checkbox" class="check" value="5"/> Check 5</td>
    </tr>
</table>

jQuery :-

<script type="text/javascript">
$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.check').each(function(){
                this.checked = true;
            });
        }else{
             $('.check').each(function(){
                this.checked = false;
            });
        }
    });
    
    $('.check').on('click',function(){
        if($('.check:checked').length == $('.check').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});
</script>

jQuery : https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

For other jQuery solutions please visit jQuery

Related Posts

JQuery Remove duplicate elements

JQuery Remove duplicate elements – Easy method

JQuery Remove duplicate elements: It’s very easy to remove duplicate elements from a list using jQuery. Demo: Let’s say we have below list: Here multiple duplicate values…

jQuery sorting by price

jQuery sorting by price – Easy method(jQuery 3.x)

In this example let’s check how to do jQuery sorting by price in an easy way. Demo: Its a very important feature in ecommerce platforms to do…

sum of datatable column

Calculate sum of Datatable columns and display in footer – Easy method with sum()

In this example let’s check how to calculate sum of datatable columns (multiple columns) and display the same in footer. In some cases we may need to…

jquery datatable

jQuery Datatable – Easy Steps

Here is simple example to create jQuery Datatable. jQuery Datatable organizes data in grid like format of rows and columns. It is very organized, interactive and intutive….

jquery toggle

jQuery Toggle() Method

How to do jquery Toggle() method to show/hide onclick The jQuery toggle() method is used to toggle between the hide() and show() method. It shows the hidden…

jquery validation

jQuery validation for confirm password

How to validate password and confirm password using jQuery validation plugin ? Earlier we have discussed how to validate a form validation with jQuery validate plugin, in…

Leave a Reply

Your email address will not be published. Required fields are marked *