Javascript Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
Java-Script Tutorial
Introduction Introduction
Variables Variables
Operators Operators
Statements Statements
Loops Loops
Functions Functions
Objects Objects
Arrays Arrays
Cookies JS Cookies
Browser Objects Browser Objects
Form DOM Form DOM
Style Objects DOM Style Objects
Forums Ask Your Doubts
Scraps More about Javascript
Feedback Feedback
 

Check box Object


Tutorials Javascript

Topic

How to change checkbox selection using javascript?
or
What are the events associated with checkbox?



Explanation
Basics of HTML form checkbox

        The following syntax will get the check box object in javascript
Syntax: document.formname.checkboxname

Example Code:
<form name=testform>
<input name=cb1 value=test type=checkbox>
<input name=cb2 value=test2 type=checkbox>
</form>

<script language="javascript">
var cbobject= document.testform.cb1;
</script>

The object cbobject is an array of check box element. To use the first check box, we have to call cbobject[0], for second box it is cbobject[1] and so on.. Here are the events, dom properties and method associated with checkbox element.

Event Handlers: Associated with Form type Check Box:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing checkbox events");
}
</script>
Event Handler Description Example
onMouseOver This is invoked when a mouse is moved over the checkbox <input type=checkbox onMouseOver="output()">
Result: CB1
onMouseDown This is invoked when a mouse is pressed down on the checkbox <input type=checkbox onMouseDown="output()">
Result: CB1
onMouseUp This is invoked when a mouse is pressed down on the checkbox and released <input type=checkbox onMouseUp="output()">
Result: CB1
onClick onClick is invoked when a mouse click is done on the checkbox <input type=checkbox onClick="output()">
Result: CB1
onBlur Executes some code when the check box loses focus using tab <input type=checkbox onBlur="output()">
Result: CB1
onFocus Executes some code when the check box gets the focus using tab <input type=checkbox onFocus="output()">
Result: CB1

DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter checkbox properties in javascript.
The below examples are based on the form
<form name=testb>
<input name=mycb type=checkbox value=111> box1
<input name=mycb type=checkbox value=222> box2
</form>

DOM Property Description Example
checked Used to check or select checkbox. Each element has to be checked individually. The element if selected will return true else false. To Check:
var ss = document.testb.mycb[0].checked;
var ss1 = document.testb.mycb[1].checked;

To Select:
document.testb.mycb[0].checked = true;

defaultChecked Used to check whether the check box is selected by default To Get:
var ss = document.testb.mycb[0].defaultChecked;

form Used to get the parent node (form object) of this check box To Get:
var ss = document.testb.mycb[0].form;

name Used to get checkbox name To Get:
var ss = document.testb.mycb[0].name;

type Used to get form type To Get:
var ss = document.testb.mycb[0].type;

value Used to set or get checkbox value To Get:
var ss = document.testb.mycb[0].value;

To Set::
document.testb.mycb[0].value = "testy";

DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like dynamic check box selection, using javascript.
DOM Method Description Example
click() Used to dynamically make a checkbox checked To Click:
document.testb.mycb.click();
blur() Used to dynamically make the check box blur To Blur:
document.testb.mycb.blur();
focus() Used to dynamically get focus on the check box To Focus:
document.testb.mycb.focus();

Example: Making Check Box Select on Mouse Over
<script language=javascript>
function cbevent()
{
var xx = document.xx.cbtest;
xx.checked = true;
}
function cbeventq()
{
var xax = document.xx.cbtest;
xax.checked = false;
}
</script>

<form name=xx>
<input type=checkbox name=cbtest onMouseOut="cbeventq()" onMouseOver="cbevent()"> Checking
</form>


Result:
Checking





A Note
Javascript (JS) is one of the most used languages in the world. Some times spelled as Java Script. Hope you enjoy this tutorial. Do send your feedback or suggestions on this javascript or java script tutorial. This is a copyright content.

Other Links

web hosting