Click somewhere in the row of the table and it will check the checkbox in ...?

Question

I am trying to figure out how to do this, but I cannot figure it out. Basically I want to be able to click anywhere in the table row and it will check / uncheck the box. I know this is possible because this is what PHPMyAdmin does ...

here is my row table

<tbody> <tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr> <tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr> </tbody> 

Answer 1

 <script type="text/javascript"> function selectRow(row) { var firstInput = row.getElementsByTagName('input')[0]; firstInput.checked = !firstInput.checked; } </script> 

...

 <tbody> <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr> <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr> </tbody> 

_{Note: you also have collisions by identifiers. Your identifiers must be unique.}

Here is an alternative with software binding:

 document.querySelector("table").addEventListener("click", ({target}) => { // discard direct clicks on input elements if (target.nodeName === "INPUT") return; // get the nearest tr const tr = target.closest("tr"); if (tr) { // if it exists, get the first checkbox const checkbox = tr.querySelector("input[type='checkbox']"); if (checkbox) { // if it exists, toggle the checked property checkbox.checked = !checkbox.checked; } } }); 

 <table> <tbody> <tr> <td> <input type="checkbox" id="chk1" name="chk1" /> </td> <td>1</td> <td>2011-04-21 22:04:56</td> <td>action</td> </tr> <tr> <td> <input type="checkbox" id="chk2" name="chk2" /> </td> <td>2</td> <td>2011-04-21 22:04:56</td> <td>action</td> </tr> <tr> <td> <input type="checkbox" id="chk2" name="chk3" /> </td> <td>2</td> <td>2011-04-21 25:30:16</td> <td>action</td> </tr> </tbody> </table> 

Answer 2

You do not need JavaScript for this:

 td label { display: block; } 

 <td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td> 

Just tags and some CSS.

Answer 3

Try it...

 $("tr").click(function() { var checkbox = $(this).find("input[type='checkbox']"); checkbox.attr('checked', !checkbox.attr('checked')); }); 

http://jsfiddle.net/dVay8/

Answer 4

You can change the <table> and rely on the roles of CSS and ARIA . So you can instead do the whole <tr> a <label> . This eliminates the need for JavaScript or an extra label for each cell.

 div[role="table"] { display: table; } label[role="row"] { display: table-row; } label[role="row"]:hover{ background-color: rgba(0,96,212,.15); } span[role="cell"] { display: table-cell; padding: 3px 6px; } 

 <div role="table"> <label role="row"> <span role="cell"><input type="checkbox" name="1"></span> <span role="cell">1</span> <span role="cell">2011-04-21 22:04:56</span> <span role="cell">action</span> </label> <label role="row"> <span role="cell"><input type="checkbox" name="2"></span> <span role="cell">2</span> <span role="cell">2011-04-21 22:04:56</span> <span role="cell">action</span> </label> </div>