Page 57 - JavaScript修炼之道

46 第四部分 表单技巧

任务 20 同时选择或反选多个 checkbox

常常会遇到这种情况：有一个列表，这上面有用户希望一并完成的操作。要把列表中多项的
某个属性一起删除、移动、保存和改变，首先需要让用户选择出特定的项。

有时需要进行全选。在这种情况下，列表长的时候就会让人很难受，所以说批量切换选择
状态是不错的UI功能，如下图所示。

对应的HTML很简单。在表格的表头放一个checkbox作为切换选框。这自动指定了其作用域，
能让我们的脚本代码找到对应的<tbody>，把它作为要处理的那些checkbox的容器。

脚本本身也很清楚：对切换选框的单击作出反应，也就是在对应的<tbody>中找到那些
checkbox并更新它们的checked=属性，这样就实现了多个checkbox状态的切换。

现在不妨练习一下，改写这段代码以达到以下两个目标。

 允许页面中存在多个表格，每个表格都带一个切换选框。这意味着要把id=替换为class
属性，然后用事件委托来避免注册过多的监听器。
 设法处理更复杂的表格，即每个表格中有不只一个<tbody>。是的，这是有效的HTML
标记（用某种方式给数据分组时，一个body就是表的一个语义节）。有趣的是，加上不止
一个的<tbody>反而会简化脚本代码！