Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Help with clearing / checking checkboxes

    I have the following form:

    Code:
    <form action='search_tr.php?action=search' method='post'><a name='search'></a><h3>Training Resources</h3>
    <p>
    Please search by <u>either</u> category or keyword.<p>
    
    <b>Search by category(s): </b>
    <p>
    <!-- start of table one -->
    <table border='0'>
    <tr>
    <td width='320'><input type='checkbox' name='catSearch[ ]' value='::1::' id='cat0'> <label for='cat0'>Research Methods</label></td>
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='catSearch[ ]' value='::2::' id='cat1'> <label for='cat1'>Software Packages</label></td>
    </tr>
    
    <tr>
    
    <td width='320'><input type='checkbox' name='catSearch[ ]' value='::3::' id='cat2'> <label for='cat2'>Personal Development</label></td>
    </tr></table>
    <!-- end of table one -->
    <p>
    <hr>
    <p>
    <b>Search by keyword(s): </b>
    <p>
    <!-- start of table two -->
    <table border='0'>
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::1::' id='kw0'> <label for='kw0'>Web Design</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::2::' id='kw1'> <label for='kw1'>Microsoft Office</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::3::' id='kw2'> <label for='kw2'>Bibliographic Software</label></td>
    
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::4::' id='kw3'> <label for='kw3'>Statistical Software Packages</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::5::' id='kw4'> <label for='kw4'>Software for Qualitative Analysis</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::6::' id='kw5'> <label for='kw5'>Literature Searching</label></td>
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::7::' id='kw6'> <label for='kw6'>Systematic Reviews</label></td>
    
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::8::' id='kw7'> <label for='kw7'>Survey Design</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::9::' id='kw8'> <label for='kw8'>Qualitative Methods</label></td>
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::10::' id='kw9'> <label for='kw9'>Quantitative Methods</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::11::' id='kw10'> <label for='kw10'>Interviewing</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::12::' id='kw11'> <label for='kw11'>Focus Groups</label></td>
    
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::13::' id='kw12'> <label for='kw12'>Cognitive</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::14::' id='kw13'> <label for='kw13'>Statistical Analysis</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::15::' id='kw14'> <label for='kw14'>Research Management</label></td>
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::16::' id='kw15'> <label for='kw15'>Appraisal</label></td>
    
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::17::' id='kw16'> <label for='kw16'>Recruitment</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::18::' id='kw17'> <label for='kw17'>Equality</label></td>
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::19::' id='kw18'> <label for='kw18'>Budgets</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::20::' id='kw19'> <label for='kw19'>Time Management</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::21::' id='kw20'> <label for='kw20'>Presentation Skills</label></td>
    
    </tr>
    
    <tr>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::22::' id='kw21'> <label for='kw21'>Assertiveness</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::23::' id='kw22'> <label for='kw22'>Training the Trainer</label></td>
    <td width='320'><input type='checkbox' name='kwSearch[ ]' value='::26::' id='kw23'> <label for='kw23'>Longitudinal</label></td>
    </tr></table>
    
    <!-- end of table two -->
    <p>
    <input type='submit' value='Search'></form>
    which effectively has two blocks of checkboxes, each in their own table.

    How easy / possible is it that when I check a box in table one, all of the the boxes in table two that are checked clear, and vice versa, when any in table two are checked, table one is cleared?

    Many thanks,
    Ed Ludlow
    Last edited by eludlow; 09-03-2008 at 10:55 AM. Reason: Add resolved tag to subject

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Here is the basic idea to check all of the checkboxes inside a table with the id of tableId.

    Code:
    var elems = document.getElementById("tableId").getElementsByTagName("input");
    
    var lngth = elems.length;
    for(var i=0;i<elems.length;i++){
      if(elems[i].type=="checkbox")elems[i].checked = true;
    }
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • Users who have thanked A1ien51 for this post:

    eludlow (09-03-2008)

  • #3
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    It is very poor practice to use tables for "layout." Use CSS for layout.

    Tables are for tabular data, not for positioning elements.

    In either case, it's considered good practice to indent HTML elements.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	
    	function clearGroup(nGroup){
    
    		for (i=0; i<nGroup.length; i++)
    			{
    			 if (nGroup[i].checked)
    				{
    				 nGroup[i].checked = false;
    				}
    			}
    	}
    
    	function init(){
    
    		var nCategory = document.getElementsByName('catSearch[ ]');
    		var nKeyword = document.getElementsByName('kwSearch[ ]');
    		for (i=0; i<nCategory.length; i++)
    			{
    			 nCategory[i].onclick = function(){clearGroup(nKeyword)}
    			}
    		for (i=0; i<nKeyword.length; i++)
    			{
    			 nKeyword[i].onclick = function(){clearGroup(nCategory)}
    			}
    	}
    
    	onload = init;
    	
    </script>
    <style type="text/css">
    
    	 body {background-color: #eae3c6; margin-top: 60px;}
    	 form {width: 620px; margin: auto; font-family: times; font-size: 12pt;}
    	 fieldset {width: 620px; background-color: #f0fff0; border: 1px solid #87ceeb;}
    	 legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
    	.submitBtn {font-family: tahoma; font-size: 10pt; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}
    
    </style>
    </head>
          <body>
              <form action='search_tr.php?action=search' method='post'>
                   <a name='search' id="search"></a>
                   <h3>
                        Training Resources
                   </h3>
                   <p>
                        Please search by <u>either</u> category or keyword.
                   </p>
    
                   <p>
                        <b>Search by category(s):</b>
                   </p>
                   <p>
                        <!-- start of table one -->
                   </p>
                   <table border='0'>
                        <tr>
    
                             <td width='320'>
                                  <input type='checkbox' name='catSearch[ ]' value='::1::' id='cat0'> <label for='cat0'>Research Methods</label>
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='catSearch[ ]' value='::2::' id='cat1'> <label for='cat1'>Software Packages</label>
    
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='catSearch[ ]' value='::3::' id='cat2'> <label for='cat2'>Personal Development</label>
                             </td>
                        </tr>
                   </table><!-- end of table one -->
    
                   <hr>
                   <p>
                        <b>Search by keyword(s):</b>
                   </p>
                   <p>
                        <!-- start of table two -->
                   </p>
                   <table border='0'>
    
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::1::' id='kw0'> <label for='kw0'>Web Design</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::2::' id='kw1'> <label for='kw1'>Microsoft Office</label>
                             </td>
    
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::3::' id='kw2'> <label for='kw2'>Bibliographic Software</label>
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::4::' id='kw3'> <label for='kw3'>Statistical Software
                                  Packages</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::5::' id='kw4'> <label for='kw4'>Software for Qualitative
                                  Analysis</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::6::' id='kw5'> <label for='kw5'>Literature Searching</label>
                             </td>
    
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::7::' id='kw6'> <label for='kw6'>Systematic Reviews</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::8::' id='kw7'> <label for='kw7'>Survey Design</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::9::' id='kw8'> <label for='kw8'>Qualitative Methods</label>
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::10::' id='kw9'> <label for='kw9'>Quantitative Methods</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::11::' id='kw10'> <label for='kw10'>Interviewing</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::12::' id='kw11'> <label for='kw11'>Focus Groups</label>
                             </td>
    
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::13::' id='kw12'> <label for='kw12'>Cognitive</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::14::' id='kw13'> <label for='kw13'>Statistical Analysis</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::15::' id='kw14'> <label for='kw14'>Research Management</label>
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::16::' id='kw15'> <label for='kw15'>Appraisal</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::17::' id='kw16'> <label for='kw16'>Recruitment</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::18::' id='kw17'> <label for='kw17'>Equality</label>
                             </td>
    
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::19::' id='kw18'> <label for='kw18'>Budgets</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::20::' id='kw19'> <label for='kw19'>Time Management</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::21::' id='kw20'> <label for='kw20'>Presentation Skills</label>
                             </td>
                        </tr>
                        <tr>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::22::' id='kw21'> <label for='kw21'>Assertiveness</label>
    
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::23::' id='kw22'> <label for='kw22'>Training the Trainer</label>
                             </td>
                             <td width='320'>
                                  <input type='checkbox' name='kwSearch[ ]' value='::26::' id='kw23'> <label for='kw23'>Longitudinal</label>
                             </td>
    
                        </tr>
                   </table><!-- end of table two -->
                                   <input type='submit' name="submit" class="submitBtn" value='Search'>
                 </form>
    	</body>
    </html>
    Last edited by Cranford; 09-02-2008 at 08:19 PM.

  • Users who have thanked Cranford for this post:

    eludlow (09-03-2008)

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    19
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Many thanks all. Cranford that is perfect for what I want, thank you.

    Yes, I'm aware tables shouldn't be used for layout, however in this case every cell and row (and therefore form element) is dynamically produced through PHP depending on user input before the search is conducted, so tables are the most functional way for me to cope with this, especially as it's for a CMS administration area, so "functional" is more important than presentation.

    Many thanks once again,
    Ed


  •  

    Posting Permissions

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