我正在try 创建一个带有复选框的表，其中包含一个"全部选中"框. 但我有几个问题:
- 我找不到如何全部选中/取消选中它们(遍历和选中它们？)
- 如果我单击"全部选中"框，它将选中下一个复选框(正如当前代码的状态所预期的那样).但是，如果我取消选中列表中的第一个复选框，"全部选中"按钮就不会按预期工作.
我发现很难阅读《了解如何解决问题》中的文档.我只是想让它充当一个"正常"的"全部选中"复选框.
<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>