Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

select checkbox from a <td onclick> event

Posted on 2005-05-12
6
Medium Priority
?
3,110 Views
Last Modified: 2007-11-27
I'm trying to place a check in the check box when the user clicks any part of the table row
I need all the check boxes to have the same name so that is when they are using the array[]  feature.
I don’t want to use a hidden input to collect the values or have to rewrite my posting code to parse it.

Here is the sample I have thus far
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
      <script language="JavaScript" type="text/javascript">
      function setCheckbox(theCheckbox){
          if (document.getElementById(theCheckbox)) {
              document.getElementById(theCheckbox).checked = (document.getElementById(theCheckbox).checked ? false : true);
              if (document.getElementById(theCheckbox + 'r')) {
                  document.getElementById(theCheckbox + 'r').checked = document.getElementById(theCheckbox).checked;
              }
          } else {
              if (document.getElementById(theCheckbox + 'r')) {
                  document.getElementById(theCheckbox + 'r').checked = (document.getElementById(theCheckbox +'r').checked ? false : true);
                  if (document.getElementById(theCheckbox)) {
                      document.getElementById(theCheckbox).checked = document.getElementById(theCheckbox + 'r').checked;
                  }
              }
          }
      }
      </script>
</head>

<body>
<form>
<table cellpadding="5" cellspacing="0" border="0" summary="products">
<tr>
      <th colspan="3">Select Product</th>
</tr>
<tr>
      <td onclick="setCheckbox(family[]);"  style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Accessories" /></td>
      <td onclick="setCheckbox(family[]);"  style="border-bottom: thin dashed Blue;">Accessories</td>

</tr>
<tr>
      <td onclick="setCheckbox(family[]);"  style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Master Packs" /></td>
      <td onclick="setCheckbox(family[]);"  style="border-bottom: thin dashed Blue;">Master Packs</td>
</tr>
<tr>
      <td onclick="setCheckbox(family[]);" style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Parts" /></td>
      <td onclick="setCheckbox(family[]);"  style="border-bottom: thin dashed Blue;">Part</td>
</tr>
</table>
</form>
</body>
</html>
0
Comment
Question by:Timothy Golden
  • 3
  • 2
6 Comments
 
LVL 3

Expert Comment

by:haobaba1
ID: 13989651
You can do this by putting all of the text in the TD in a Label and setting the "for" attribute of the label to the corresponding checkbox. This is the recommending way of implementing the behavior you want. From an accessibility point of view having labels in different table cells than the inputs they belong to is a very bad practice, using labels will alleviate that.

I recommend the following:

<tr>
<td><input type="checkbox" id="mp" value="Master Packs" name="family[]"></td>
<td><label for="mp">Master Packs</label></td>
</tr>

no javascript is neccessary to implement the behavior you desire.
0
 
LVL 3

Author Comment

by:Timothy Golden
ID: 13990192
haobaba1  this does not work in IE for Mozilla
0
 
LVL 3

Author Comment

by:Timothy Golden
ID: 13990214
haobaba1  this does not work in IE OR Mozilla (typo)
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Accepted Solution

by:
dakyd earned 80 total points
ID: 13992288
How about this?  It will allow you to check/uncheck the checkbox if you click anywhere in the row.  The only catch is that it assumes the checkbox is the first input in the first <td>, so if you move the checkbox somewhere else, the script will have to be modified.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
     <script type="text/javascript">
     function setCheckbox(e, row){
       var cbox = row.cells[0].getElementsByTagName("input")[0];
       var clickedElt = window.event? event.srcElement: e.target;
       if (clickedElt != cbox)
         cbox.checked = !(cbox.checked);
     }
     </script>
</head>

<body>
<form>
<table cellpadding="5" cellspacing="0" border="0" summary="products">
<tr>
     <th colspan="3">Select Product</th>
</tr>
<tr onclick="setCheckbox(event, this);">
     <td style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Accessories" /></td>
     <td style="border-bottom: thin dashed Blue;">Accessories</td>

</tr>
<tr onclick="setCheckbox(event, this);">
     <td style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Master Packs" /></td>
     <td style="border-bottom: thin dashed Blue;">Master Packs</td>
</tr>
<tr onclick="setCheckbox(event, this);">
     <td style="border-bottom: thin dashed Blue;"><input type="checkbox" name="family[]" value="Parts" /></td>
     <td style="border-bottom: thin dashed Blue;">Part</td>
</tr>
</table>
</form>
</body>
</html>
0
 
LVL 3

Author Comment

by:Timothy Golden
ID: 13995840
worked like a charm!!!!  thanks alot!
0
 
LVL 3

Expert Comment

by:haobaba1
ID: 13996443
I believe you are mistaken. I copied the table row directly from this page and put it into a table. When I opened it in IE and Firefox the checkbox is selected when I click on the label. I have a gazillion forms that are section 508 compliant that wouldn't be if I didn't use this method.  I know this to be the proper way and using javascript to do this is a waste of time. Sorry to tell you so.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question