»
EnglishFrenchVietnamese

Print - Check/Uncheck Multiple Checkboxes - JavaScriptBank.com

Full version: jsB@nk » Form » Checkbox » Check/Uncheck Multiple Checkboxes
URL: https://www.javascriptbank.com/check-uncheck-multiple-checkboxes.html

Check/Uncheck Multiple Checkboxes © JavaScriptBank.comThis JavaScript allows for the selection of multiple checkboxes in a form. It create the buttons dynamically with unobtrusive JavaScript.

Full version: jsB@nk » Form » Checkbox » Check/Uncheck Multiple Checkboxes
URL: https://www.javascriptbank.com/check-uncheck-multiple-checkboxes.html



CSS
<STYLE type=text/css>.fdCheckbox-chkboxarray {BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 50%; COLOR: #000; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: left}.fdCheckbox-groupa {BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 50%; COLOR: #000; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: left}.fdCheckbox-groupb {BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ccc 1px solid; WIDTH: 50%; COLOR: #000; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #efefef; TEXT-ALIGN: left}FIELDSET {BACKGROUND-COLOR: #ccc}</STYLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript">// 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" licenseYou 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);      }    };  }};window.onload = checkBoxMaster.init;</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->