checkbox mouseclicking area is too small (up to 50 tables)

<form>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>

</form>

Open in new window




note: there are up to 50 tables using a php foreach loop

tried adding
<label>

want a large area
ideally the each <table></table> will check each checkbox

if that is not possible then
clicking each <td></td> will check each checkbox

if that is not possible then
clicking each <tr></tr> will check each checkbox


where user clicks and checkbox gets clicked

you can add ids and classes
LVL 1
rgb192Asked:
Who is Participating?
 
Robert SchuttSoftware EngineerCommented:
Some observations after playing around with this:
- Putting a label around the entire table does work (in FireFox).
- If you use a style for the label "display:block" you can click on the entire line.
- If you use <!DOCTYPE html> then it works in IE9 as well (otherwise it works outside the table on the label but not inside the table).

Here is my test page:
<!DOCTYPE html>
<html>
<head>
<title> EE Q_27848714 </title>
<style type="text/css">
table {
	background-color: #ffe;
	border: 1px solid gold;
}
label {
	display: block;
	background-color: #dfa;
}
</style>
</head>
<body>

<form>

<label for="chk1">
<table>
<tr>
<td>
<input type="checkbox" id="chk1">
</td>
<td>content1
</td>
</tr>
<tr>
<td>content2
</td>
</tr>
</table>
</label>

<label for="chk2">
<table>
<tr>
<td>
<input type="checkbox" id="chk2">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</label>

<label for="chk3">
<table>
<tr>
<td>
<input type="checkbox" id="chk3">
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</label>

</form>

</body>
</html>

Open in new window

Alternatively you could use jQuery, something like:
  $('table').click(function(){
	$(this).closest('input[type="checkbox"]').click();
  });

Open in new window

0
 
rgb192Author Commented:
thanks
works great
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.