jsCheckBox – Advanced select unselect checbox

September 18, 2009, 11:20 AM

Today I will show an script that is really useful to work with Checkbox, at least to me ;)

Script Name: jsCheckBox
Version: 0.1
License: GPL v3
Screenshot:

Usage:

This first one select/unselect all the checbox from a form.

function checkUncheckAll(theElement) {
	    var theForm = theElement.form, z = 0;
		 for(z=0; z

Usage:
It will select the next checkboxes

<form id="f1">
<input id="checkall" onclick="checkUncheckAll(this);" name="checkall" type="checkbox" />
<input id="ch1" name="ch1" type="checkbox" />
<input id="ch2" name="ch2" type="checkbox" />
<input id="ch3" name="ch3" type="checkbox" />
<input id="ch4" name="ch4" type="checkbox" />
</form>

This one is a bit more complex, we say the controlbox from where we copy the state (selected or not), and the containers for other checkboxes.

function checkUncheckSome(controller,theElements) {
	var formElements = theElements.split(',');
	var theController = document.getElementById(controller);
	for(var z=0; z

Usage:

Sample 1: We will check all the checkboxes from the div 1

<input id="chAll1" onclick="checkUncheckSome('chAll1','div1')" name="chAll1" type="checkbox" />
<div id="div1">
<input id="ch1" name="ch1" type="checkbox" />
<input id="ch2" name="ch2" type="checkbox" />
<input id="ch3" name="ch3" type="checkbox" />
<input id="ch4" name="ch4" type="checkbox" /></div>

Sample 2: Only will check the div1 and div3, not the div2.

<input id="chAll1" onclick="checkUncheckSome('chAll1','div1,div3')" name="chAll1" type="checkbox" />
<div id="div1">
<input id="ch1" name="ch1" type="checkbox" />
<input id="ch2" name="ch2" type="checkbox" />
<input id="ch3" name="ch3" type="checkbox" />
<input id="ch4" name="ch4" type="checkbox" /></div>
<div id="div2">
<input id="ch21" name="ch21" type="checkbox" />
<input id="ch22" name="ch22" type="checkbox" />
<input id="ch23" name="ch23" type="checkbox" />
<input id="ch24" name="ch24" type="checkbox" /></div>
<div id="div3">
<input id="ch31" name="ch31" type="checkbox" />
<input id="ch32" name="ch32" type="checkbox" />
<input id="ch33" name="ch33" type="checkbox" />
<input id="ch34" name="ch34" type="checkbox" /></div>