X

LATEST #JQUERY NEWS

jQuery Snippets: Check/Un-Check All Function


This easy-to-implement jQuery code snippet is super useful, and can be used to create a functionality that will check OR uncheck any checkboxes within a particular fieldeset. So for example, if your HTML looks like this:

<fieldset>
   <div><input type=“checkbox” class=“checkall”>Check All</div>
   <div><input type=“checkbox”>Check Me</div>
   <div><input type=“checkbox”>Check Me</div>
   <div><input type=“checkbox”>Check Me</div>
</fieldset>

Your jQuery code to make the .checkall class actually check all of the checkbox inputs should look something like this:

$(function() {
    $('.checkall').click(function() {
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

With the above code, you can easily add a “Check All” button to any of your fieldset elements.

Recently Published

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...

article image
»

How to Dynamically Trim Text Using jQuery

This easy beginners jQuery tutorial demonstrates how you can use ...

article image
»

jQuery Snippets: Getting the Current Year

Here’s a fun, simple, and incredibly useful jQuery that you can ...

article image
»

jQuery Snippets: How to Conditionally Enable Submit

One easy way to prevent users from submitting an empty form in a ...

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...