Page 58 - JavaScript修炼之道

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

对应的HTML

form/checklist/index_for_book.html

<table id="mailbox">
<thead>
<tr>
<th><input type="checkbox" id="toggler" /></th>
<th>Subject</th>
<th>Date</th>
<!-- 格式，大小，附件…… -->
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="mail_ids[]" value="1" /></td>
<td>Happy new year!</td>
<td>Jan 1, 2010 00:03am</td>
<!-- …… -->
</tr>
<!-- 更多行…… -->
</tbody>
</table>
把选择状态传播给每行开头的checkbox

form/checklist/checklist.js

function toggleAllCheckboxes() {
var scope = this.up('table').down('tbody'), boxes = scope &&
scope.select('tr input[type="checkbox"]:first-of-type');
var refChecked = this.checked;
(boxes || []).each(function(box) { box.checked = refChecked; });
}

document.observe('dom:loaded', function() {
$('toggler').observe('click', toggleAllCheckboxes);
});