JavaScript Forum

**thetao2** · 09-11-2009, 07:16 PM

Hello,

I ran into a problem just now, counting the number of checkboxes in a group where they all share the same name. When I have two (or more) checkboxes, the length property appears as two (or as the expected value). But when I have just one checkbox, the length appears as "undefined"! For example

HTML Code:

<html>
<body>
<form name="theform">

<table>
<tr>
<td><input type="checkbox" name="contact_list" value="Email: john.doe@foo.com" /></td>
<td>Email</td>
<td>john.doe@foo.com</td>
</tr>
<tr>
<td><input type="checkbox" name="contact_list" value="Email: jane.doe@foo.com" /></td>
<td>Email</td>
<td>jane.doe@foo.com</td>
</tr>
</table>

<p>
<input type="button" onclick="alert(document.theform.contact_list.length);" value="Click Me" />

</form>
</body>
</html>

This works until you remove one of the table rows. But I've tested this in Firefox 3.5, IE7, and Safari, and all have the same problem, which tells me that I've made some mistake. Does anyone have suggestions?

Thanks!

**JeremyMiller** · 09-11-2009, 08:22 PM

I always use the DOM functions, so not sure what's up with your actual issue, but here's a functioning solution:

HTML Code:

<html>
<body>
<form name="theform">

<table id="thetable">
<tr>
<td><input type="checkbox" name="contact_list" value="Email: john.doe@foo.com" /></td>
<td>Email</td>
<td>john.doe@foo.com</td>
</tr>
<tr>
<td><input type="checkbox" name="contact_list" value="Email: jane.doe@foo.com" /></td>
<td>Email</td>
<td>jane.doe@foo.com</td>
</tr>
</table>

<p>
<input type="button" onclick="alert(document.getElementById('thetable').getElementsByTagName('INPUT').length);" value="Click Me" />

</form>
</body>
</html>

**thetao2** · 09-11-2009, 08:52 PM

Thanks for the fast reply. Your suggestion is more elegant than what I was going to try, and also removes the need to use try/catch when there are no checkboxes present on the page. It works for me!