Problem utilizing checkbox array with Javascript

[wetlegs6]

Hi guys.

So this is a message inbox style page for a site Im making. I've used checkbox arrays before and always found them to be really difficult to make work right.

This one just puts a checkbox for each message, and one master one at the top (not in the array) to enable check/uncheck all.

There's then a load of Javascript functions which push AJAX requests out to php which deletes messages or whatever.

I've finally got back round to looking at it today. When I click the checkbox that should tick them all, only the first and 3rd are ticked, the second remains clear.

All the Javascript is is a loop that goes through the checkboxes calling the .click() method (As there is added functionality that is run when each of these checkboxes is clicked, too).

For some reason, the length of the array is reported as 5 (3 checkboxes = 5 array positions?!) and both array pos 1 and 2 seem to affect the second checkbox - First ticking, then unticking it as it cycles through.

I really cannot fathom how one checkbox can occupy two positions....

There's a boat load of code below, Javascript for the function, and the HTML output of the php script I'm using to generate the page.

function checkAll(obj){
	var checkBoxes=new Array();
	checkBoxes = document.msgBox.checkArr;
	//alert(checkBoxes.length);
	
	for (var i=0;i<(checkBoxes.length-1);i++){
		checkBoxes[i].click();
		//alert(i);
	}
}

<form name='msgBox' id='msgBox' /><table cellpadding='2' cellspacing='0' border='0' width='80&#37;' id='msgDisplayTable'><tr class='row'>

		<td width='4%'><input type='checkbox' onclick='javascript:checkAll(this);' /></td>
		<td width='36%'>Subject</td><td width='18%'>From</td>
		<td width='18%' style='border:none;'>Date</td>
		</tr><tr><td class='pad' colspan='4'></td></tr><tr><td class='pad' colspan='4'></td></tr><tr class='row' id='msg1' a='a'> <!--onmouseout='killOptions("1");' onmouseover='showOptions("1")'-->
				<td><input type='checkbox' name='checkArr' id='checkArr' value='14' onclick='javascript:checkChecks();' /><td onclick='window.location="messagecenter/14";' style='cursor:pointer;'><a href='messagecenter/14'>wdqas</a></td><td><a href='user/jamanpan'>Ben Wedlake</a></td><td><span>Tuesday, September 29th 2009</span></td></tr> <!--FORMS FOR POST REPLYING-->

				<form name='replyHidden1' id='replyHidden1' action='message/jamanpan' method='post'>
				<input type='hidden' id='msg_msg' name='msg_msg' value='awda' />
				<input type='hidden' id='msg_title' name='msg_title' value='wdqas' />
				</form><tr id='optionsRow1'><td height='1' colspan='4'></td></tr><tr class='row' id='msg2' b='b'> <!--onmouseout='killOptions("2");' onmouseover='showOptions("2")'-->
				<td><input type='checkbox' name='checkArr' id='checkArr' value='8' onclick='javascript:checkChecks();' /><td onclick='window.location="messagecenter/8";' style='cursor:pointer;'><a href='messagecenter/8'>Test1...</a></td><td><a href='user/Madina'>Adam Slater</a></td><td><span>Tuesday, January 19th 2038</span></td></tr> <!--FORMS FOR POST REPLYING-->
				<form name='replyHidden2' id='replyHidden2' action='message/Madina' method='post'>

				<input type='hidden' id='msg_msg' name='msg_msg' value='[quote!]TEST! Nest test[/quote!]

ROOAR' />
				<input type='hidden' id='msg_title' name='msg_title' value='Test1...' />
				</form><tr id='optionsRow2'><td height='1' colspan='4'></td></tr><tr class='row' id='msg3' b='b'> <!--onmouseout='killOptions("3");' onmouseover='showOptions("3")'-->
				<td><input type='checkbox' name='checkArr' id='checkArr' value='9' onclick='javascript:checkChecks();' /><td onclick='window.location="messagecenter/9";' style='cursor:pointer;'><a href='messagecenter/9'>Test...</a></td><td><a href='user/Madina'>Adam Slater</a></td><td><span>Tuesday, January 19th 2038</span></td></tr> <!--FORMS FOR POST REPLYING-->
				<form name='replyHidden3' id='replyHidden3' action='message/Madina' method='post'>
				<input type='hidden' id='msg_msg' name='msg_msg' value='AMAAAAZING!' />

				<input type='hidden' id='msg_title' name='msg_title' value='Test...' />
				</form><tr id='optionsRow3'><td height='1' colspan='4'></td></tr><tr><td class='pad'></td></tr><tr><td colspan='4'><input type='button' value='Delete selected' onclick='javascript:deleteMsgs("usermessages");' 
			id='deleteButton' /><input type='button' value='Reply' id='replyButton' onclick='sendReplyForm();' /> 
		<!--<input type='button' value='Forward' id='fwdButton' />-->
		</td></tr></table></form>

[the_cat]

I tend to use getElementsByName and then iterate through them, so something like:

colCheckBoxes=document.getElementsByName("checkArr");
for ( var i=0; i<colCheckBoxes;i++){

[Xeel]

As the cat said, it's better to group checkboxes by name and use getElementsByName().

[Snowcore]

Or much simplier with jQuery: you assigns generic class for your checkboxes and just:

$("#container .boxes[checked]")