-
September 29th, 2009, 01:18 PM
#1
Problem utilizing checkbox array with Javascript
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.
Code:
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);
}
}
Code:
<form name='msgBox' id='msgBox' /><table cellpadding='2' cellspacing='0' border='0' width='80%' 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>
-
October 5th, 2009, 03:50 AM
#2
Re: Problem utilizing checkbox array with Javascript
I tend to use getElementsByName and then iterate through them, so something like:
colCheckBoxes=document.getElementsByName("checkArr");
for ( var i=0; i<colCheckBoxes;i++){
-
October 5th, 2009, 10:13 AM
#3
Re: Problem utilizing checkbox array with Javascript
As the cat said, it's better to group checkboxes by name and use getElementsByName().
Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?
I had a nightmare last night. I was dreaming that I’m 64-bit and my blanket is 32-bit and I couldn’t cover myself with it, so I’ve spent the whole night freezing. And in the morning I find that my blanket just had fallen off the bed. =S (from: bash.org.ru)
//always looking for job opportunities in AU/NZ/US/CA/Europe :P
willCodeForFood(Arrays.asList("Java","PHP","C++","bash","Assembler","XML","XHTML","CSS","JS","PL/SQL"));
USE [code] TAGS! Read this FAQ if you are new here. If this post was helpful, please rate it!
-
October 16th, 2009, 03:00 AM
#4
Re: Problem utilizing checkbox array with Javascript
Or much simplier with jQuery: you assigns generic class for your checkboxes and just:
Code:
$("#container .boxes[checked]")
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|