Back to Fred Mac Donald's Blog

Tick all Checkboxes with the same class using jQuery

Tick all Checkboxes with the same class using jQuery

This short code snippet will allow you to tick additional checkboxes with the same class using jQuery

Recently while developing the "Stock Control" part of the XMS E-Commerce Module I ran into a problem with managing stock items that has options attached to the main item that also needs to be controlled.

To solve the problem I had to find a way to tick all the check boxes associated with the "Main" stock item.

I assigned a pseudo class to the check boxes that corresponds with the original line id number for the order.
That means that all the options belonging to a specific "Main" stock item on the order will have the same class.

In the image below the first two check boxes are related. Checking any of them need to check the other.
Both will be checked / unchecked at the same time. One can not be checked / unchecked without the other.

Unchecked Check Boxes

Checked Check Boxes

Now it was easy to write a jQuery function to tick all the check boxes with the same class.
The function will both "Tick" and "Un-tick" all the boxes, no matter if you click on the "Main" item or the associated "Option"

JSFiddle Example

Written by:  - Updated 4 Oct, 2016  
comments powered by Disqus
flashy