Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 677
  • Last Modified:

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
0
rgb192
Asked:
rgb192
1 Solution
 
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

Featured Post

Independent Software Vendors: 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!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now