Checkbox object

	JavaScript Programmer's Reference
Prev	Home	Up		Next

Availability:

DOM level - 1

JavaScript - 1.0

JScript - 1.0

Internet Explorer - 3.02

Netscape - 2.0

Opera - 3.0

Inherits from: Input object

JavaScript syntax: - myCheckbox = myDocument.aFormName.anElementName

- myCheckbox = myDocument.aFormName.elements[anItemIndex]

IE myCheckbox = myDocument.all.anElementID

IE myCheckbox = myDocument.all.tags("INPUT")[anIndex]

IE myCheckbox = myDocument.all[aName]

- myCheckbox = myDocument.forms[aFormIndex].anElementName

- myCheckbox = myDocument.forms[aFormIndex].elements[anItemIndex]

- myCheckbox = myDocument.getElementById(anElementID)

- myCheckbox = myDocument.getElementsByName(aName)[anIndex]

- myCheckbox = myDocument.getElementsByTagName("INPUT")[anIndex]

HTML syntax: <INPUT TYPE="checkbox">

Argument list: anIndex A valid reference to an item in the collection

aName The name attribute of an element

anElementID The ID attribute of an element

anItemIndex A valid reference to an item in the collection

aFormIndex A reference to a particular form in the forms collection

Object properties: checked, defaultChecked, indeterminate, status, type, value

Object methods: handleEvent()

Event handlers: onAfterUpdate, onBeforeUpdate, onBlur, onClick, onDblClick, onErrorUpdate, onFilterChange, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onRowEnter, onRowExit

Many properties, methods, and event handlers are inherited from the Input object class. Refer to topics grouped with the "Input" prefix for details of common functionality across all sub-classes of the Input object super-class.

There isn't really a Checkbox object class but it is helpful when trying to understand the wide variety of input element types if we can reduce the complexity by discussing only the properties and methods of a checkbox. In actual fact, the object is represented as an item of the Input object class.

Checkboxes may be used in groups where each one has the same name. However, this breaks the mechanism by which a form element can be accessed associatively since there is now more than one object with the same name. The fix for this is to support an InputArray so that you can access the items with the same name from a collection.

Although Checkbox items should not deactivate other items in the same family in the way that Radio buttons do, you can relate their states to one another by means of the onclick event handler.

Unlike MSIE, Netscape does not support the defaultValue property or the select() method for this sub-class of the Input object.

Warnings:

If you enumerate a form object that has several elements having the same name, in Netscape these will be represented by a single property of that name that refers to an InputArray. In MSIE, you will get multiple properties with the same name, but each will refer to a collection object. This is probably a bug in MSIE, which exhibits this behavior in version 5 for Macintosh and probably on other platforms too.
Note that on MSIE, Input objects are actually INPUT objects because MSIE follows a general rule of naming object classes after the capitalised name of the HTML tag that instantiates them.

Example code:

   <HTML>

   <HEAD>

   </HEAD>

   <BODY>

   <DIV ID="RESULT">?</DIV>

   <FORM onClick="handleClick()">

   <INPUT TYPE="checkbox" VALUE="A" NAME="BOX_A">Selection A<BR>

   <INPUT TYPE="checkbox" VALUE="B" NAME="BOX_B">Selection B<BR>

   <INPUT TYPE="checkbox" VALUE="C" NAME="BOX_C">Selection C<BR>

   <INPUT TYPE="checkbox" VALUE="D" NAME="BOX_D">Selection D<BR>

   </FORM>

   <SCRIPT>

   function handleClick()

   {

      myString  = "Selection [";

      myString += event.srcElement.value;

      myString += "], State [";

      myString += event.srcElement.checked;

      myString += "]";

      document.all.RESULT.innerText = myString;

   }

   </SCRIPT>

   </BODY>

   </HTML>

See also: Element object, Form.elements[], FormElement object, Input object, Input.accessKey, onClick

Property	JavaScript	JScript	N	IE	Opera	DOM	Notes
`checked`	1.0	1.0	2.0	3.02	3.0	1	-
`defaultChecked`	1.0	1.0	2.0	3.02	3.0	1	-
`indeterminate`		3.0		4.0			-
`status`		3.0		4.0
`type`	1.1	1.0	3.0	3.02	3.0	1	ReadOnly
`value`	1.0	1.0	2.0	3.02	3.0	1

Method	JavaScript	JScript	N	IE	Opera	NES	ECMA	DOM	CSS	HTML	Notes
`handleEvent()`	1.2		4.0								-

Event name	JavaScript	JScript	N	IE	Opera	HTML	Notes
`onAfterUpdate`		3.0		4.0			-
`onBeforeUpdate`		3.0		4.0			-
`onBlur`	1.1	3.0	3.0	4.0	3.0
`onClick`	1.0	3.0	2.0	4.0	3.0	4.0
`onDblClick`	1.2	3.0	4.0	4.0	3.0	4.0
`onErrorUpdate`		3.0		4.0			-
`onFilterChange`		3.0		4.0			-
`onFocus`	1.0	3.0	2.0	4.0	3.0
`onHelp`		3.0		4.0
`onKeyDown`	1.2	3.0	4.0	4.0	3.0	4.0
`onKeyPress`	1.2	3.0	4.0	4.0	3.0	4.0
`onKeyUp`	1.2	3.0	4.0	4.0	3.0	4.0
`onMouseDown`	1.2	3.0	4.0	4.0	3.0	4.0
`onMouseMove`	1.2	3.0	4.0	4.0		4.0
`onMouseOut`	1.1	3.0	3.0	4.0	3.0	4.0
`onMouseOver`	1.0	3.0	2.0	4.0	3.0	4.0
`onMouseUp`	1.2	3.0	4.0	4.0	3.0	4.0
`onRowEnter`		3.0		4.0			-
`onRowExit`		3.0		4.0			-

JavaScript
Programmer's
Reference

Checkbox object (Object/DOM)

Warnings:

Example code:

Inheritance chain:

Prev	Home	Next
CharacterData.substringData()	Up	Checkbox.checked
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions.

JavaScriptProgrammer'sReference

Checkbox object (Object/DOM)

Warnings:

Example code:

Inheritance chain:

JavaScript
Programmer's
Reference