How do I check a checkbox nested in a table row when clicking anywhere in the row using hyperscript?

Question

I have an HTML table where each row contains a checkbox. I want to use hyperscript to set the checkbox as checked when I click the parent <tr>. I want to do so without attaching a hyperscript statement to each <tr> in the table.

My table looks like this:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Varname</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Foo</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Bar</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Baz</td>
        </tr>
    </tbody>
</table>

I want to use hyperscript so that the checkbox is becomes checked toggled when I click anywhere in the parent <tr> element, to this end I know I can add the hyperscript statement:

_="on click toggle [@checked] on the .row-selector in me"

to each <tr> to achieve what I want, like so:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Varname</td>
        </tr>
    </thead>
    <tbody>
        <tr _="on click toggle [@checked] on the .row-selector in me">
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Foo</td>
        </tr>
        <tr _="on click toggle [@checked] on the .row-selector in me">
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Bar</td>
        </tr>
        <tr _="on click toggle [@checked] on the .row-selector in me">
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Baz</td>
        </tr>
    </tbody>
</table>

However, this makes my code harder to read, and so I'd like to move this instruction to the <tbody> tag.

I have gotten as far as the example below, where clicking a tr will select all checkboxes in the table:

<table>
    <thead>
        <tr>
            <th></th>
            <th>Varname</td>
        </tr>
    </thead>
    <tbody _="on click from <tr/> in me toggle [@checked] on .sample-selector">
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Foo</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Bar</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="selected-rows" class="row-selector"/></td>
            <td>Baz</td>
        </tr>
    </tbody>
</table>

Working from the example above, what is the correct way to instruct hyperscript to only toggle checkbox inside the clicked <tr>?

Answer 1

Hyperscript understand "closest" so this will work

<tbody _="on click toggle [@checked] on the .row-selector in event.target.closest('tr')"><tr>