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>
?
Hyperscript understand "closest" so this will work
<tbody _="on click toggle [@checked] on the .row-selector in event.target.closest('tr')"><tr>