How to implement "select all" check box in 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 construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:

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

Using jQuery:

// Listen for click on toggle checkbox$('#select-all').click(function(event) {       if(this.checked) {        // Iterate each checkbox        $(':checkbox').each(function() {            this.checked = true;                                });    } else {        $(':checkbox').each(function() {            this.checked = false;                               });    }});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" /><input type="checkbox" name="checkbox-2" id="checkbox-2" /><input type="checkbox" name="checkbox-3" id="checkbox-3" /><!-- select all boxes --><input type="checkbox" name="select-all" id="select-all" />

I'm not sure anyone hasn't answered in this way (using jQuery):

  $( '#container .toggle-button' ).click( function () {    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)  })

It's clean, has no loops or if/else clauses and works as a charm.