Select / Deselect multiple checkboxes with _hyperscript

I'm trying to create a table with checkboxes that has a "check all" box. But I have a few problems:

I cant find out how to check/uncheck them all (traverse and check them?)
If I click the "check all" box, it checks the next checkbox (as expected by the state of the current code. But If I uncheck the first checkbox in the list, the "check all" stop working as expected.

I find it pretty hard to read the docs in find out how to solve things. I just want it to act as a "normal" "check all" checkbox.

<script src="https://unpkg.com/hyperscript.org@0.9.12/dist/_hyperscript.min.js"></script>
<table id="larmlista" class="table table-zebra">
        <!-- head -->
        <thead>
        <tr>
            <th>
                <!-- TODO - this is where a lot of buggs lives -->
                <input id="select-all-larm" type="checkbox" class="checkbox checkbox-sm"
                       _="on click
                        if me.checked
                            get #larmlista then add @checked to the next <input/>
                        else
                            get #larmlista then remove @checked from the next <input/>
                            then remove me.checked
                        end
                "/>
            </th>
            <th>Plats</th>
            <th>Namn</th>
            <th>Ip</th>
        </tr>
        </thead>
        <tbody>
        <!-- row 1 -->
        <tr>
            <th>
                <input type="checkbox" class="checkbox checkbox-sm"/>
            </th>
            <td>Office</td>
            <td>Thing1</td>
            <td>10.102.0.1</td>
        </tr>
        <!-- row 2 -->
        <tr>
            <th>
                <input type="checkbox" class="checkbox checkbox-sm"/>
            </th>
            <td>Backyard</td>
            <td>Thing2</td>
            <td>10.102.0.23</td>
        </tr>
        <!-- row 3 -->
        <tr>
            <th>
                <input type="checkbox" class="checkbox checkbox-sm"/>
            </th>
            <td>Kitchen</td>
            <td>Thing3</td>
            <td>10.102.0.16</td>
        </tr>
        </tbody>
    </table>

"Final" code:

<script src="https://unpkg.com/hyperscript.org@0.9.12/dist/_hyperscript.min.js"></script>
<table id="larmlista" class="table table-zebra">
    <!-- head -->
    <thead>
    <tr>
        <th>
            <input id="select-all-larm" name="larm_all" type="checkbox" class="checkbox checkbox-sm"
                    _="on click set <input[name='larm']/>'s checked to my.checked"/>
        </th>
        <th>Id</th>
        <th>Område</th>
        <th>Namn</th>
        <th>Ip</th>
    </tr>
    </thead>
    <tbody>
    <!-- row 1 -->
    <tr>
        <th>
            <input id="1" type="checkbox" class="checkbox checkbox-sm" name="larm"
                    _="on click handleChecked(me)"/>
        </th>
        <td>1</td>
        <td>Office</td>
        <td>Thing1</td>
        <td>10.102.0.1</td>
    </tr>
    <!-- row 2 -->
    <tr>
        <th>
            <input id="2" type="checkbox" class="checkbox checkbox-sm" name="larm"
                    _="on click handleChecked(me)"/>
        </th>
        <td>2</td>
        <td>Backyard</td>
        <td>Thing2</td>
        <td>10.102.0.23</td>
    </tr>
    <!-- row 3 -->
    <tr>
        <th>
            <input id="3" type="checkbox" class="checkbox checkbox-sm" name="larm"
                    _="on click handleChecked(me)"/>
        </th>
        <td>3</td>
        <td>Kitchen</td>
        <td>Thing3</td>
        <td>10.102.0.16</td>
    </tr>
    </tbody>
</table>
<script type="text/hyperscript">
   def handleChecked(checkbox)
        if checkbox.checked
                if (<input[name='larm']/>'s checked) do not contains false
                set <input[name='larm_all']/>'s checked to checkbox.checked
                end
            else  
                set <input[name='larm_all']/>'s checked to my.checked
        end
    end
</script>

Solution

Set the name of your checkboxes to "foo" (it's always a good practice to define a name for input elements)

<input type="checkbox" class="checkbox checkbox-sm" name="foo" />

Then use HS code in your "select all" checkbox:

_="on click set <input[name='foo']/>'s checked to my.checked"

If you want to stick to class names, then add class to each checkbox:

<input type="checkbox" class="checkbox checkbox-sm foo" />

Then use the following:

_="on click set .foo.checked to my.checked"