wrap html tags to make all clickable

Question

I'm looking to turn an entire row clickable. Right now the rows look like

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>      
<tr>
            <label for="object_303">
                <td><input checked="checked" id="object_303" name="objects" type="checkbox"/></td>
                <td>Group</td>
                <td>Obj name</td>
            </label>
        </tr>
</table>

This seems to correctly match http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label_default_css which shows how wrapping in a label makes it all clickable.

How can I wrap this entire row to be clickable? Salamat

Answer 1

You can do this with some jQuery up top. Try this:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#row1").click(function() {
        ($(this).find(":checkbox").prop("checked", !$(this).find(":checkbox").prop("checked")));
    });
});
</script>
<table>      
<tr id="row1">
                <td><input checked="checked" id="object_303" name="objects" type="checkbox"/></td>
                <td>Group</td>
                <td>Obj name</td>
        </tr>
</table>

You can also generalize this by changing the jquery selector. If you want all <tr>s to behave this way, just change the "#row1" selector to tr.