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

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...