Javascript/PHP &amp; Checkboxes

Javascript/PHP & Checkboxes

Tracer

I know this is really a Javascript question, but maybe one of you could quickly assist. I have a PHP script which generates a HTML table (which checkboxes for each table row)

echo "<FORM name=nick method=post>";
echo "<table border=0 width=100% OnMouseOut=\"javascript:highlightTableRowVersionA(0);\">";
SOME PHP CODE 
While Loop BEGINS

echo "<tr onclick=\"document.nick.ClearID[0].checked = true;\" onMouseOver=\"javascript:highlightTableRowVersionA(this, '#8888FF');\"><td>$location</td><td><INPUT TYPE=CHECKBOX NAME=\"clearID[]\" value=$flagsRow[ID]></td></tr>";

END LOOP

Basically, I want the checkbox to CHECK when you click ANYWHERE on the Table Row - Has anyone ever done this?

MarkR

What you need to do, is use the HTML <label> element.


<input type="checkbox" name="something" id="cb_something" />
<label for="cb_somethign">huge great label goes here, perhaps with a picture too
<img src="nicepic.jpg" alt="nostinkingalt" /></label>

No Javascript required.

More than one label can belong to the same element, so you can click on just about anything.

Mark

planetsim

Here is a quick example.

<html>
<head>
<title>Check Test</title>
<script type="text/javascript">

function rowClick(id)
{
    var object = id;
    var checkBoxObj = object.getElementsByTagName("input")[0];

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

}

</script>
</head>
<body>

<form action="">
<table border="1" width="20%">
    <tr>
        <th>&nbsp;</th>
        <th>Title</th>
    </tr>
    <tr onclick="rowClick(this);">
        <td width="10"><input type="checkbox" name="checkbox_1" value="" /></td>
        <td>Test</td>
    </tr>
    <tr onclick="rowClick(this);">
        <td><input type="checkbox" name="checkbox_2" value="" /></td>
        <td>Test 2</td>
    </tr>
    <tr onclick="rowClick(this);">
        <td><input type="checkbox" name="checkbox_3" value="" /></td>
        <td>Test 3</td>
    </tr>
</table>
</form>

</body>
</html>