Onclick row checkes check box

[crazygolfer]

I have a table that is populated by php/mysql. I would like to have it were when you click on a row any where on the row the check box for that row gets checked. I have been searching the net for days looking for a way to do this by have not found any thing. Any help would be great Thanks!!!

[Airshow]

Crazygolfer,

Try this,

function checkRow(chBoxId){
	var ch = document.getElementById(chBoxId);
	if(ch){ ch.checked = true; }
}

<form ....>
<table border>
<tr>
<td><input type="checkbox" name="r1"></td>
<td onclick="checkRow('r1')">Row 1 Text 1</td>
<td onclick="checkRow('r1')">Row 1 Text 2</td>
<td onclick="checkRow('r1')">Row 1 Text 3</td>
</tr><tr>
<td><input type="checkbox" name="r2"></td>
<td onclick="checkRow('r2')">Row 2 Text 1</td>
<td onclick="checkRow('r2')">Row 2 Text 2</td>
<td onclick="checkRow('r2')">Row 2 Text 3</td>
</tr>
</table>
</form>

It would be simpler to attach the event handler directly to each <tr> but that would make it impossible to uncheck the check box.

Airshow

[almostbob]

html <label> tag
anything within the label is clickable for the checkbox

<label for='check1'>Entire Row<!-- any kind of code --> <input type='checkbox' id='check1' value='yes'> Yes <!-- any kind of code --></label>

[almostbob]

** the above is not be valid code in all circumstance **
it validates if <label> is inside one <td> but does not if <label> spans more than one <td> or <tr>

apologies

[crazygolfer]

This worked great thanks!!! I made a few little changes like so.

function checkRow(chBoxId){
    var ch = document.getElementById(chBoxId);
    if(ch.checked == false){ ch.checked = true; } else { ch.checked = false; }
}

And then applied it to the <tr> tag. Thanks again for your help, was not sure how to go about this.

---------------------------------------------------------------------

Try this,

function checkRow(chBoxId){
    var ch = document.getElementById(chBoxId);
    if(ch){ ch.checked = true; }
}

code-html:

<form ....>
<table border>
<tr>
<td><input type="checkbox" name="r1"></td>
<td onclick="checkRow('r1')">Row 1 Text 1</td>
<td onclick="checkRow('r1')">Row 1 Text 2</td>
<td onclick="checkRow('r1')">Row 1 Text 3</td>
</tr><tr>
<td><input type="checkbox" name="r2"></td>
<td onclick="checkRow('r2')">Row 2 Text 1</td>
<td onclick="checkRow('r2')">Row 2 Text 2</td>
<td onclick="checkRow('r2')">Row 2 Text 3</td>
</tr>
</table>
</form>

It would be simpler to attach the event handler directly to each <tr> but that would make it impossible to uncheck the check box.

Airshow

[Airshow]

Crazygolfer,

Aha, conventional toggle action.

The line :

if(ch.checked == false){ ch.checked = true; } else { ch.checked = false; }

will simplify to :

if(ch) { ch.checked = !ch.checked; }

You actually have two solutions for this because almostBob's method will do exactly the same.

Good luck.

Airshow

[ogunm]

hi everybody, just using id tag all browsers ok...
ex:
id="r1"
id="r2"

<script type="text/javascript">
function checkRow(chBoxId){
var ch = document.getElementById(chBoxId);
if(ch.checked == false){ ch.checked = true; } else { ch.checked = false; }
}
</script>


<form method="post" action="aasd.php">

<table border>

<tr>

<td><input type="checkbox" name="r1" id="r1"></td>

<td onclick="checkRow('r1')">Row 1 Text 1</td>

<td onclick="checkRow('r1')">Row 1 Text 2</td>

<td onclick="checkRow('r1')">Row 1 Text 3</td>

</tr><tr>

<td><input type="checkbox" name="r2" id="r2"></td>

<td onclick="checkRow('r2')">Row 2 Text 1</td>

<td onclick="checkRow('r2')">Row 2 Text 2</td>

<td onclick="checkRow('r2')">Row 2 Text 3</td>

</tr>

</table>

</form>