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.

Also Read :  jQuery Validate Email address using Regex Expression

<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

Also Read :  AngularJS Random Strong Password Generator

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.

Recommended For You.

DataTables Column Search Server side processing
Today, We want to share with you DataTables Column Search Server side processing in PHP.In this post we will show

Add a Comment

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