Check and Uncheck all Multiple Checkbox using jQuery

Check and Uncheck all Multiple Checkbox using jQuery

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Check and Uncheck all Multiple Checkbox using jQuery

In this post we will show you Best way to implement Check or Select / Deselect all Checkboxes using jQuery, hear for How to checkbox – jquery check uncheck all checkboxes with a button with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

External include libs

At First of all you need to External include the jQuery CDN or library.

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

Example 1 : Multiple Checkbox Select and Deselect using jQuery

HTML markup Part(index.html)

<form action="#">
    <p><label><input type="checkbox" id="livecheckall"/> Check all</label></p>
    
    <fieldset>
        <legend>All the Options Avialbles : Loads of checkboxes</legend>
        <p><label><input type="checkbox" /> Pakainfo.com 1</label></p>
        <p><label><input type="checkbox" /> Pakainfo.com 2</label></p>
        <p><label><input type="checkbox" /> Pakainfo.com 3</label></p>
        <p><label><input type="checkbox" /> Pakainfo.com 4</label></p>
    </fieldset>
</form>

JavaScript Part (index.js)

$("#livecheckall").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

Example 2 : Select and Deselect all checkboxes using jQuery

HTML markup Part(index.html)

<ul class="main">
    <li><input type="checkbox" id="livecheckall" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="liveck" value="1"/>Live24u Products 1</li>
        <li><input type="checkbox" class="liveck" value="2"/>Live24u Products 2</li>
        <li><input type="checkbox" class="liveck" value="3"/>Live24u Products 3</li>
        <li><input type="checkbox" class="liveck" value="4"/>Live24u Products 4</li>
        <li><input type="checkbox" class="liveck" value="5"/>Live24u Products 5</li>
    </ul>
</ul>

JavaScript Part (index.js)

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

Example

I hope you have Got Multiple Checkbox Select/Deselect using jQuery Examples And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.