Problem utilizing checkbox array with Javascript
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4

Thread: Problem utilizing checkbox array with Javascript

  1. #1
    Join Date
    Sep 2009
    Posts
    5

    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&#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>

  2. #2
    Join Date
    Jun 2009
    Posts
    86

    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++){

  3. #3
    Join Date
    Jul 2005
    Location
    Currently in Mexico City
    Posts
    566

    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!

  4. #4
    Join Date
    Dec 2007
    Posts
    5

    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
  •  


Azure Activities Information Page

Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center