Full version: jsB@nk » Form » Checkbox » Check/Uncheck Multiple Checkboxes
URL: https://www.javascriptbank.com/check-uncheck-multiple-checkboxes.html
This 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
<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--><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--><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-->