Check/Uncheck Multiple Checkboxes

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: checkBox.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Brian McAllister | http://www.frequency-decoder.com/ */

/*
Further information on this script can be located on the
  author's Web site: http://www.frequency-decoder.com/

This script is distributed under a 
  "Attribution-NonCommercial-ShareAlike 2.0" license

You are free:
  1. to copy, distribute, display, and perform the work.
  2. to make derivative works.

Under the following conditions:

  1. Attribution: You must attribute the work in the manner
       specified by the author or licensor.
  2. Noncommercial: You may not use this work for commercial purposes.
  3. Share Alike*: If you alter, transform, or build upon this work,
       you may distribute the resulting work only under a   license identical to this one.
*/

var checkBoxMaster = {
  butCnt: 0,

  checkOrUncheckAll: function() {
    // Step 1: Get the checkbox group name from the button classname
    var cname = this.className;
    cname = cname.replace(/uncheckall/,"");
    cname = cname.replace(/checkall/,"");
    cname = cname.replace(' ','');

    // Step 2: Find the form element
    var form = this.parentNode;
    while(form.nodeName.toLowerCase() != "form") {
      if(!form.parentNode) break;
      form = form.parentNode;
    };

    if(form.nodeName.toLowerCase() == 'form') {
      var checkboxs = form.getElementsByTagName('input');
      // Step 3: Loop through all the checkboxs and check/uncheck the ones whose name matches the name located in Step 1.
      for(var i = 0, inp; inp = checkboxs[i]; i++) if(inp.type.toLowerCase() == 'checkbox' && inp.name.indexOf(cname) == 0) inp.checked = (this.className.search('uncheckall') == -1);
    };
  },

  createButtons: function(form, classname) {
    // Get all of the forms child divs
    var placeholder = form.getElementsByTagName('div');
    var elem = form;

    // Try to find the button placeholder div
    for(var i = 0, ph; ph = placeholder[i]; i++) {
      if(ph.className && ph.className.search('button-placeholder-'+classname) != -1) {
        elem = ph;
        break;
      };
    };

    // Button 1 - check all
    var but1 = document.createElement('input');
    but1.type = "button";
    but1.className = "checkall " + classname;
    but1.name = "button" + checkBoxMaster.butCnt++;
    but1.value = "Check All";
    but1.onclick = checkBoxMaster.checkOrUncheckAll;

    // Button 2 - uncheck all
    var but2 = document.createElement('input');
    but2.type = "button";
    but2.className = "uncheckall " + classname;
    but2.name = "button" + checkBoxMaster.butCnt++;
    but2.value = "Uncheck All";
    but2.onclick = checkBoxMaster.checkOrUncheckAll;

    // DOM inject
    elem.appendChild(but1);
    elem.appendChild(but2);
  },

  init: function() {
    // Get all the forms
    var forms = document.getElementsByTagName('form');

    // Loop through the forms
    for(var i = 0, form; form = forms[i]; i++) {

      // Make sure the form has at least one required classname
      if(!form.className || form.className.search(/fdCheckbox-[^\s]+/) == -1) continue;

      // Get all child input tags
      var inplist = form.getElementsByTagName('input');

      // Create an array of relevant classnames
      var cboxnames = form.className.match(/fdCheckbox-[^\s]+/g);

      // Loop through the classname array
      for(var k = 0, cname; cname = cboxnames[k]; k++) {

        // Get the name of the checkbox group by removing the string "fdCheckbox-" from the current classname
        cname = cname.replace("fdCheckbox-","");

        // Initiate the checkbox counter
        var cbox = 0;

        // Loop through all the inputs
        for(var j = 0, inp; inp = inplist[j]; j++) {
          // If the input is of type checkbox and has the correct name and is not disabled then increment the counter
          if(inp.type=='checkbox' && inp.disabled == false && inp.name.indexOf(cname) == 0) cbox++;
        }
        // If two or more checkboxs have been located then create the buttons (it would be daft to create the buttons for a single checkbox)
        if(cbox > 1) checkBoxMaster.createButtons(form, cname);
      }
    };
  }
};


// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  checkBoxMaster.init;
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="checkBox.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div align="center">
  <form class="fdCheckbox-chkboxarray">
    <fieldset>
      <legend>Multiple Checkbox Group Test 1</legend>
      <p><input type="checkbox" name="chkboxarray" value="1" id="cb1"> : <label for="cb1">chkboxarray 1<br/></label></p>
      <p><input type="checkbox" name="chkboxarray" value="2" id="cb2"> : <label for="cb2">chkboxarray 2<br/></label></p>
      <p><input type="checkbox" name="chkboxarray" value="3" id="cb3"> : <label for="cb3">chkboxarray 3<br/></label></p>
      <p style="font-size: .9em;">The following checkbox should be left untouched by the check/uncheck action</p>
      <p><input type="checkbox" name="extrachkbox" value="1" id="ex"> : <label for="ex">extrachkbox 1<br/></label></p>
    </fieldset>
  </form>
</div>

<div align="center">
  <form class="fdCheckbox-groupa fdCheckbox-groupb">
    <fieldset>
      <legend>Multiple Checkbox Group Test 2</legend>
      <p><input type="checkbox" name="groupa" value="1" id="cb4"> : <label for="cb4">groupa 1<br/></label></p>
      <p><input type="checkbox" name="groupa" value="2" id="cb5"> : <label for="cb5">groupa 2<br/></label></p>
      <p class="marginme"><input type="checkbox" name="groupa" value="3" id="cb6"> : <label for="cb6">groupa 3<br/></label></p>
      <div class="button-placeholder-groupa"> </div>
      <p style="font-size: .9em;">A second group of checkboxs starts here.</p>
      <p><input type="checkbox" name="groupb[]" value="1" id="cb7"> : <label for="cb7">groupb 1<br/></label></p>
      <p><input type="checkbox" name="groupb[]" value="2" id="cb8"> : <label for="cb8">groupb 2<br/></label></p>
      <p><input type="checkbox" name="groupb[]" value="3" id="cb9"> : <label for="cb9">groupb 3<br/></label></p>
      <div class="button-placeholder-groupb"> </div>
    </fieldset>
    <p style="font-size: .7em;">Read the <a href="http://www.frequency-decoder.com/2005/10/20/check-uncheck-multiple-check-boxes-script/">related post</a> to get a better idea of whats going on behind the scenes.
  </form>
</div>

Leave a Response

(2 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Nov 6, 2008

hi, i have to columns, both columns have multi check box, in between them there is remove and add button, which remove the selected checkboxes from 2nd column to the first column. while the add button, add the selected check boxes from the first column to the second column.[br /][br /]Can yuo help me, on how I can achieve this? Thanks.

Carlos Aug 5, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Check/Uncheck Multiple Checkboxes

General

Notes

Source Code

External file

Head

Body

Leave a Response

Attention JavaScript Coders

Whitepapers and More