• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

How To Select All CheckBoxes using JQuery

May 25, 2014 //  by Krishna Srinivasan//  Leave a Comment

This example demonstrates how to select all the checkboxes using JQuery. It is one of the common requirement in many of the applications, when there is multiple checkboxes in a page, we have to keep an option for “select all” and when all the checkboxes got selected, by default “select all” check box also to be selected. Here I have written a simple example to demonstrate that.

<!DOCTYPE html>
<html>
<head>
    <title>How to Check All Check Boxes using JQuery</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
         $(function () {

            var chkId = '';
            $('.chkNumber:checked').each(function () {
                chkId += $(this).val() + ",";
            });
            chkId = chkId.slice(0, -1);

           $('.chkSelectAll').change(function () {
                $('.chkNumber').prop('checked', this.checked);
            });

     $('.chkNumber').change(function() { $('.chkSelectAll').prop('checked',$('.chkNumber:checked').length == $('.chkNumber').length);
     });

        });
    </script>
</head>
<body>
    <h2>Select All Check Boxes using JQuery</h2>
    <table id="mytable">
        <tr>
            <td>
                <input type="checkbox" class="chkSelectAll" />SelectAll
            </td>
            <td><input type="checkbox" class="chkNumber" value="1" />One</td>
            <td><input type="checkbox" class="chkNumber" value="2" />Two</td>
            <td><input type="checkbox" class="chkNumber" value="3" />Three</td>
            <td><input type="checkbox" class="chkNumber" value="4" />Four</td>
            <td><input type="checkbox" class="chkNumber" value="5" />Five<br /></td>
        </tr>
    </table>
</body>
</html>

JQuery CheckBox Demo

  • Run This Demo

checkbox-all

Category: jQueryTag: JQuery Validation

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « How To Enable JavaScript In Browsers
Next Post: Unknown Lifecycle Phase Error in Maven Build »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

EJB 3.0 Timer Services

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact