Select / Deselect all checkboxes using jQuery

first you need to include the jQuery library.

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


The “Select all” checkbox have an id #select_all and items checkboxes have a checkbox class. When checkbox with #select_all id is clicked,  If #select_all is checked, loop through each checkbox with class checkbox and check all the checkboxes. Otherwise uncheck all the checkboxes.
Once each checkbox is clicked, we will check whether all the checkbox was checked or not.

<script type="text/javascript">
    $(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>