SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2001
    Location
    Australia
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-check boxes

    Hi guys,

    Anyone know how to make a multi-check box?
    So if I click on one box it will select all the boxes associated with that function. For example a delete and approve boxes.

    Any help would be great.

    Code:
    <form action="<?=$PHP_SELF?>" method="post" name="form">
    <table width="100" border="1" bordercolor="#000000" cellspacing="0" cellpadding="5">
     <tr align="center"> 
     <td width="5%"> R</td>
     <td width="5%"> D</td>
     </tr>
     <tr align="center"> 
     <td width="5%"><input name="acceptit" type="checkbox" value="Check All" title="Select/Deselect All" onClick="CheckAll();"></td>
     <td width="5%"><input name="deleteit" type="checkbox" value="Check All" title="Select/Deselect All" onClick="CheckAll();"></td>
     </tr>
     <tr bgcolor="<?=$trbg?>" align="center"> 
     <td width="5%"><input type="checkbox" name="acceptit[<?=$linkid?>]" value="Y"></td>
     <td width="5%"><input type="checkbox" name="deleteit[<?=$linkid?>]" value="Y"></td>
     </tr>
     <tr bgcolor="<?=$trbg?>" align="center"> 
     <td width="5%"><input type="checkbox" name="acceptit[<?=$linkid?>]" value="Y"></td>
     <td width="5%"><input type="checkbox" name="deleteit[<?=$linkid?>]" value="Y"></td>
     </tr>
     <tr bgcolor="<?=$trbg?>" align="center"> 
     <td width="5%"><input type="checkbox" name="acceptit[<?=$linkid?>]" value="Y"></td>
     <td width="5%"><input type="checkbox" name="deleteit[<?=$linkid?>]" value="Y"></td>
     </tr>
    </table>
    </form>

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go:

    Code:
    <HTML>
    <HEAD>
    <Script language="JavaScript"> 
    function CheckTheBoxes() 
    {
    for (var count = 0; count < document.form1.elements.length; count++)
    {
    var form_element = document.form1.elements[count]; 
    form_element.checked = document.form1.checkall.checked;
    }
    }
    </script>
    </HEAD>
    <BODY>
    <form name="form1">
    <input type="checkbox" name="checkbox1"> #1<BR>
    <input type="checkbox" name="checkbox2"> #2<BR>
    <input type="checkbox" name="checkbox3"> #3<BR>
    <input type="checkbox" name="checkbox4"> #4<BR>
    <input type="checkbox" name="checkall" OnClick="CheckTheBoxes()"> Check all
    </form>
    </BODY>
    </HTML>

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could always try my Drag-To-Check checkboxes

    Are you wanting to check ALL checkboxes in a form, or only those in a specific checkbox array (which you don't have, since they are all named differently)??
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Guru
    Join Date
    Jun 2001
    Location
    Australia
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you can see from my original post there is 2 sets of boxes, One for accept and one for deny. I would like it so I could press one button for accept and it would accept all only and the same for deny all only. The drag boxes is nice but my boxes go up to 20 pages long. Any further help would be great.

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh ya - sorry, I was looking at gregc's example

    Here you go. I make a special accomodation for server-side generated checkboxes using the isNamedAsArray argument.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>test</title>
    	<script type="text/javascript">
     
    		function checkAll( control, arrayName, isNamedAsArray )
    		{
    			var f = control.form,
    				cbArray = new Array();
     
    			if ( isNamedAsArray )
    			{
    				var coll	= f.getElementsByTagName( 'input' ),
    					pattern = new RegExp( "^" + arrayName + "\\[.*\\]$" ),
    					i	 = 0,
    					cb;
    				while( cb = coll[i++] )
    				{
    					if ( cb.type == 'checkbox' && pattern.test( cb.name ) )
    					{
    						cbArray[cbArray.length] = cb;
    					}
    				}
    			}
    			else
    				cbArray = f.elements[arrayName];
     
    			for ( var i = 0; i < cbArray.length; i++ )
    			{
    				cbArray[i].checked = control.checked;
    			}
    		}
     
    	</script>
    </head>
    <body>
    	<form action="" method="post" name="form">
    		<table width="100" border="1" bordercolor="#000000" cellspacing="0" cellpadding="5">
    			<tr align="center"> 
    				<td width="5%"> R</td>
    				<td width="5%"> D</td>
    			</tr>
    			<tr align="center"> 
    				<td width="5%"><input name="acceptit" type="checkbox" value="Check All" title="Select/Deselect All" onClick="checkAll(this,this.name,1);"></td>
    				<td width="5%"><input name="deleteit" type="checkbox" value="Check All" title="Select/Deselect All" onClick="checkAll(this,this.name,1);"></td>
    			</tr>
    			<tr bgcolor="#EEEEEE" align="center"> 
    				<td width="5%"><input type="checkbox" name="acceptit[0]" value="Y"></td>
    				<td width="5%"><input type="checkbox" name="deleteit[0]" value="Y"></td>
    			</tr>
    			<tr bgcolor="#F5F5F5" align="center"> 
    				<td width="5%"><input type="checkbox" name="acceptit[1]" value="Y"></td>
    				<td width="5%"><input type="checkbox" name="deleteit[1]" value="Y"></td>
    			</tr>
    			<tr bgcolor="#EEEEEE" align="center"> 
    				<td width="5%"><input type="checkbox" name="acceptit[2]" value="Y"></td>
    				<td width="5%"><input type="checkbox" name="deleteit[2]" value="Y"></td>
    			</tr>
    		</table>
    	</form>
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    SitePoint Guru
    Join Date
    Jun 2001
    Location
    Australia
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic, thank you Beetle.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •