Check and Uncheck all Multiple Checkbox using jQuery

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!.

  Select / Deselect all checkboxes using jQuery

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

  AngularJS populate Dynamic Dependent dropdown in PHP

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.

Leave a Reply

avatar
  Subscribe  
Notify of