Aug
25

Using JavaScript to validate one or more grouped checkboxes

Rating: 3.0/5 (8 votes cast)

It’s a common task to validate a form with JavaScript upon form submission. And validating whether or not at least one checkbox in a checkbox group is checked is often a basic requirement of this task. But, if you’re form is created dynamically and if the number of checkboxes in a checkbox group can vary from 1 to more than 1, then the JavaScript needed to iterate over the checkboxes is slightly different.

Say you have an HTML form like this:

NOTE FROM THE AUTHOR, RORY HANSEN
Have you found this post helpful?
If so, I'd appreciate if you could indicate so by pressing the Google Plus button below.

<form name="frm" method="post"> <input type="checkbox" name="parts" value="1" />Head<br /> </form>

Then, using JavaScript, you can check whether the checkbox is checked like so:

var isChecked = document.frm.parts.checked;

Now, imagine that your form has more than one checkbox in the same checkbox group:

<form name="frm" method="post"> <input type="checkbox" name="parts" value="1" />Head<br /> <input type="checkbox" name="parts" value="2" />Neck<br /> <input type="checkbox" name="parts" value="3" />Arm<br /> <input type="checkbox" name="parts" value="4" />Leg<br /> </form>

Then, the JavaScript code changes a little bit, as now you have to iterate over each of the checkboxes.

var isChecked = false;

for (var i = 0; i < document.frm.parts.length; i++) { if (document.frm.parts[i].checked) { isChecked = true; } }

But. if you tried using the 2nd chunk of JavaScript on the first chunk of HTML, you’ll get a JavaScript error. This is because if you only have one checkbox, there’ll be no array to iterate over. So, you need to do a quick check before hand to see if there is more than one checkbox. If so, then iterate; otherwise, don’t.

if (document.frm.parts) { if (typeof document.frm.parts.length != 'undefined') { for (i = 0; i < document.frm.parts.length; i++) { if (document.frm.parts[i].checked) { isChecked = true; } } } else { isChecked = document.frm.parts.checked; } }

This code first checks to see that there exists at least one checkbox. Then, it checks whether the length attribute of the parts variable is defined or not. If it is defined, then we know there is more than one checkbox. Otherwise, there is only one.

And there ya have it!

Rating: 3.0/5 (8 votes cast)

Zebra-striped tables using Rails

August 25, 2005 // javascript, web development // 23 Comments //

23 Comments to “Using JavaScript to validate one or more grouped checkboxes”

January 29, 2006 at 12:31 pm
Matt Cocker says:

Hi and many thanks.
I had just found a problem in a dynamic list of checkboxes that fails when there is only one box.
This answers the question as to why and gives the perfect solution, look slike it even works if there were no check boxes at all for some reason.
Thanks again.
Matt Cocker
July 10, 2006 at 8:20 am
Maruthi says:

It was really helpful.
And quick way to get things done.
thanks a lot
July 13, 2006 at 8:54 am
Richa Arora says:

it was really very helpful ..thanks a lot
August 14, 2007 at 5:34 am
hema says:

It is really very useful and saved a lot of time.
September 23, 2007 at 11:55 am
DAR says:

Many thanks. I have a dynamic list of checkboxes and this has been driving me nuts. I was working under the assumptin that, even if only a single checkbox line gets generated, I could process it as an array of size 1 in my onClick JavaScript function. Nice explanation, nice easy-to-understand example, nice efficient code – well done!
October 6, 2007 at 1:04 am
Gaurav Harjai says:

Thanx a lot Buddy.

it was really very helpful.
October 18, 2007 at 4:56 am
Sundaram says:

I was working on the problem for 2 hrs and it would have gone more , if i didnt see this
October 18, 2007 at 8:08 pm
aprian says:

Thx’s a lot, it really helpfull.

I never realized before it will give an error if the checkbox is only one for this : document.frm.parts.length.
December 10, 2007 at 12:36 am
nie says:

thx.. really help me a lot…
January 3, 2008 at 4:20 am
kapil says:

hai,

really helpful.thx a lot
February 18, 2008 at 1:34 am
Peter says:

thanks! got me out of a real hole.
love your work!
April 22, 2008 at 1:21 pm
Boltthrower says:

Excellent. Exactly that i have been looking for… Thanks
June 20, 2008 at 9:52 am
Harv Greenberg says:

Bless you. Killed 2 hours on this puppy before figuring out what the unerlying problem was and searching for a soljtion. Thanks.
January 12, 2009 at 11:06 pm
Halesh.GC says:

Hi,

Thanks a lot…Really very good docs for javascript.

Thanks and Regards

Halesh
February 5, 2009 at 10:16 pm
Arti says:

Many Thanks !!! Saved a lot of my time :)

Warm regards
Arti
May 6, 2009 at 5:54 am
Prakash says:

Exactly that i have been looking forâ€¦ Thanks …..Thanks a lot .
February 9, 2011 at 12:25 am
sriddhar says:

This is fine when the checkbox are named as you did. The problem arises when it is named something like parts[] which is often required in php.

Head
Neck
Arm
Leg

How do you validate then?
March 7, 2011 at 5:31 pm
Jools says:

Works perfectly thanks.

@sriddhar: I’ve used this with php for a chkbox named img[], I just use img and it’s great.
August 12, 2011 at 9:51 am
Dimitri says:

Thank you for posting this – very useful.
October 24, 2011 at 6:49 am
Natalya Murphy says:

I was trying to figure out why a single-item radio group wouldn’t validate on a form, and you provided the exact answer I needed. THANK YOU for ending several hours’ worth of frustration.
January 13, 2012 at 12:59 am
kaify says:

thanks buddy. it is time saving.
January 17, 2012 at 6:52 am
Jacob says:

Works perfectly. Thank you so much!
January 24, 2012 at 8:37 am
Neerav says:

Awesome … thanks a bunch.