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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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