jsCheckBox – Advanced select unselect checbox

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:

Demo
Download

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>

Support: forum.neo22s.com

Notes:
Works in FF 3.5, Chromium, Opera 10, ie6

Share and Enjoy:
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • BarraPunto
  • Bitacoras.com
  • FriendFeed
  • Meneame
  • Netvibes
  • Reddit
  • StumbleUpon
  • Tumblr
  • Wikio
  • RSS
  • email
  • PDF
  • Print

Related posts:

  1. jsSelect – Multiple select value modifier
  2. Set value for Select – JavaScript
  3. jsTabs – Simple tab switcher
  4. JavaScript to return dimensions
  5. Input select generated from query – PHP

Leave a Reply

Follow me