Select / Deselect all checkboxes using jQuery

Table of Contents

In this tutorial, I explain how to select and deselect multiple check box using jquery.
First, you have to include a jQuery Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

HTML Code for Checkboxes

<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>

#select_all is the id for checkbox and items checkboxes have a checkbox class.
Jquery Script

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

Demo

  • Select all
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5

Here is the full code that we have written during this tutorial:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script >
$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });
    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});
</script>
<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>
Leave A Reply

Your email address will not be published.

4 Comments
  1. Javed Ur Rehman says

    Anuj your tutorial is simple and nice, i found it helpful, i also recently wrote tutorial about it hope you find it helpful too.
    http://www.allphptricks.com/how-to-select-deselect-all-checkboxes-using-jquery/

    1. Anuj kumar says

      Thank you. Your blog is also good. keep it up

  2. Javed Ur Rehman says

    Anuj your tutorial is simple and nice, i found it helpful, i also recently wrote tutorial about it hope you find it helpful too.
    http://www.allphptricks.com/how-to-select-deselect-all-checkboxes-using-jquery/

    1. Anuj kumar says

      Thank you. Your blog is also good. keep it up

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More

Privacy & Cookies Policy