jquery uncheck all checkboxes Multiple Checkbox Example

In jquery uncheck all checkboxes, 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

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 jquery uncheck all checkboxes 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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   cURL Requests with Laravel 6 using ixudra/curl
  2.   Laravel 6 Inner Join Query Example - MySQL
  3.   Bootstrap Toggle switch with ajax update to mysql in PHP
  4.   How to Check Uncheck All Checkboxes Using Jquery?
  5.   jQuery Check Uncheck All Checkbox Examples
  6.   Select / Deselect all checkboxes using jQuery
  7.   NodeJS RESTful CRUD API and MYSQL - node js Restify Tutorial
  8.   what is my screen resolution - whatismyscreenresolution
  9.   Multiple Checkbox Check Uncheck All using jQuery
  10.   Get Radio Button value using AngularJS