So, our web application has multiple Checkboxes and we want to select them all at once to modify or get their state, how do we achieve it?

Firstly, we need to make one thing certain, each of the checkboxes must not have the same ID, I know this is probably a given but thought it was worth the mention!

Select All Checkbox Elements At Once

First, we need our HTML snippet with five Checkbox Elements that have been defined with a class of "myCheckboxClass".

HTML Example

With our checkboxes defined in HTML, we need to utilize JQuery to select all checkbox elements at once.

JS

$('.myCheckboxClass');

And if we want to log this to the console, we can do the following –

console.log($('.myCheckboxClass'));

Which would output something like the following –

And that is it! We could then access the elements by using the numeric index of each checkbox that we want to modify.

Demo

Check out the following CodePen that uses all the checkboxes & JQuery together –

See the Pen
Selecting Checboxes by Danny Englishby (@DanEnglishby)
on CodePen.

Summary

Achieving this task with JQuery is, as you can see, really straight forward. The moral of the story is, to make sure that all checkbox elements have some sort of matching identifier. Whether that be a class, data- attribute or similar.

The post Select All Checkboxes With JQuery appeared first on Code Wall.