How to select checkbox on row click

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
paultfh
Forum Commoner
Posts: 31
Joined: Thu Jul 20, 2006 6:24 pm

How to select checkbox on row click

Post by paultfh »

Say you have a table with 5 columns per row and a checkbox in the first column. How do you write a script that checks the checbox when the user clicks anywhere in the row?

I can't figure this out for the life of me.

Thanks.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Code: Select all

<script language="javascript">
function checkChecked( obj ) {
	if (!obj.formname.checkboxname.checked) {
		obj.formname.checkboxname.checked = true;
	}
}
//-->
</script>

<form name="formname" id="formname">
<input type="checkbox" name="checkboxname" />This is a checkbox
<input type="image" src="images/mypic.jpg" onClick="checkChecked(this);" />
</form>
paultfh
Forum Commoner
Posts: 31
Joined: Thu Jul 20, 2006 6:24 pm

Post by paultfh »

I don't see how I incorporate that into a row
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

The same way it is incorporated into an image... the onClick event. :wink:
paultfh
Forum Commoner
Posts: 31
Joined: Thu Jul 20, 2006 6:24 pm

Post by paultfh »

I can't get it to work. Here is my code:

Code: Select all

<script language="javascript">
function checkChecked( obj ) {
        if (!obj.form1.checkbox1.checked) {
                obj.form1.checkbox1.checked = true;
        }
}

</script> 
<body>
<table width="200" border="1">
  <tr onClick="checkChecked(this);">
    <td><form id="form1" name="form1" method="post" action="">
		
      <label>
        <input type="checkbox" name="checkbox1" />
        </label>
    </form>    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Let me check the code. It may be wonky.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

I think that code doesn't work because Javascript doesn't pass by reference. Once you pass 'this', you're making a copy of the row. Consequently, when you change the 'checked' status, you're changing it on the copy, not the page.



Would it be possible to pass along the name/id of the checkbox rather than a reference to the row? That way you can cut your code down to:

Code: Select all

function checkChecked(obj)
{
  document.getElementByName(obj).checked = (document.getElementByName(obj).checked) ? false : true;
}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

because Javascript doesn't pass by reference.
objects in JS are always passed by ref.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

.... I could have sworn they weren't. Thanks for the correction.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply