Question

What’s wrong with the example jquery code? I’m attempting to be able to select table rows and checkboxes when either clicking on the table row or on the checkbox. My understanding is that events are bubbled up the DOM tree, therefore using e.stopPropagation(); in each of the checkbox handlers would prevent the row click event from being fired again. The error can be seen when clicking on a row, where for some reason the checkbox is being de-selected again.

http://jsfiddle.net/W9T5R/3/

Thanks.

Answer 1

And here we have an answer. Like the comments say, you can do this much more simply than you’re currently doing it. My way is just one of the ways. The code should be fairly self explanatory.

HTML

<table>
    <tr>
        <td><input type="radio"name="radio"></td>
        <td class="label">Row 1</td>
    </tr>
    <tr>
        <td><input type="radio" name="radio"></td>
        <td class="label">Row 2</td>
    </tr>
    <tr>
        <td><input type="radio"name="radio"></td>
        <td class="label">Row 3</td>
    </tr>
</table>

As you can see, using radio buttons instead of checkboxes is better here; it’s more semantically correct and there is less JavaScript code needed.

jQuery

$(document).ready(function() {
    $("td.label").click(function() {
        $(this).parents("tr").addClass("selected").siblings().removeClass("selected");
        $(this).parents("tr").find("input").click();
    });

    $("td > input").click(function() {
        $(this).parents("tr").addClass("selected").siblings().removeClass("selected");
    });
});

CSS (just ’cause)

.selected td
{
    background-color: #e1e1e1;
}