How to implement "select all" check box in HTML?

I have an HTML page with multiple checkboxes.

I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

From stackoverflow

• JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you 'select all' check box' onClick attribute.

  Javascript Function to Check or Uncheck all Checkboxes

  This page has a simpler example

  http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

• <script language="JavaScript">
  function toggle(source) {
    checkboxes = document.getElementsByName('foo');
    for each(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 in checkboxes)
      checkboxes[i].checked = source.checked;
  }
  

  porneL : +1 for use of obscure for-each-in construct :)

  HelloWorld : for each(var checkbox in checkboxes) --------------------------------------- should: for(var checkbox in checkboxes)

  Can Berk Güder : @HelloWorld: for each...in is actually valid Javascript: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Statements/for_each...in But, as porneL has pointed out, it's an obscure construct. Also, this code doesn't work in Safari 5 or Chrome 5. It works in FF 3.6, and IIRC, it worked in Safari 4. `for(var i in checkboxes) checkboxes[i].checked = source.checked` works in all browsers.

• Here's a bit of code that does the trick and is unobtrusive too

  /**
   * Function which adds "checkall" functionality to
   * a group of checkboxes contained in an element with an
   * id sent in the parameter "containerId"
   * The controller checkbox is contained in an element with
   * an id sent in the parameter "controllerContainerId"
   * The controllerContainer can initially have a style of
   * display: none and it will be revealed on successful execution.
   * The controllerContainer can be contained in the container element
   * but this isn't necessary
   */
  function createCheckAll( containerId, controllerContainerId ) {
      try {
       var container = document.getElementById( containerId );
       var controllerContainer = document.getElementById( controllerContainerId );
       var controller = controllerContainer.getElementsByTagName( "input" )[0];
       var allEls = container.getElementsByTagName( "input" );
      } catch( e ) {
       return;
      }
      var els = [];
      for( var i = 0, l = allEls.length; i < l; i++ ) {
       var thisEl = allEls[i];
       if( thisEl.type == "checkbox" && thisEl != controller ) {
        els.push( thisEl );
       }
      }
      controllerContainer.style.display = ( /div|blockquote|p|h[1-6]|li|dt/i.test( controllerContainer.tagName ) ) ? "block" : "inline";
      container = controllerContainer = allEls = null;
      controller.onclick = function() {
       for( var e in els ) {
        els[e].checked = this.checked;
       }
      }
  }
  
  /**
   * Example
   * <div id="checkboxes">
   *     <input type="checkbox"> One<br />
   *     <input type="checkbox"> Two<br />
   *     <input type="checkbox"> Three<br />
   *     <span id="checkboxall" style="display: none">
   *         <input type="checkbox"> Check All<br />
   *     </span>
   * </div>
   * <script type="text/javascript">
   *     createCheckAll( "checkboxes", "checkboxall" );
   * </script>
   */
  

  Guido : not very intuitive to read

• 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;                        
          });
      }
  });
  

  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" />
  

  emeraldjava : i'd add an else clause to handle the deselect use case, ;-) .. else { // Iterate each checkbox $(":checkbox").each(function() { this.checked = false; }); }