如何在 HTML 中实现“全选”复选框？

我有一个带有多个复选框的 HTML 页面。

我还需要一个名为“全选”的复选框。当我选择此复选框时，必须选择 HTML 页面中的所有复选框。我怎样才能做到这一点？

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

UPDATE:

The for each...in构造似乎不起作用，至少在本例中，在 Safari 5 或 Chrome 5 中。此代码应该适用于所有浏览器：

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}