Checkbox object (Object/DOM)

A checkbox to be used in a form. It toggles as it is clicked, but is not related to other checkboxes in the way that radio buttons are related to one another in families.

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]
IEmyCheckbox = myDocument.all.anElementID
IEmyCheckbox = myDocument.all.tags("INPUT")[anIndex]
IEmyCheckbox = 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:anIndexA valid reference to an item in the collection
aNameThe name attribute of an element
anElementIDThe ID attribute of an element
anItemIndexA valid reference to an item in the collection
aFormIndexA 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:

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

PropertyJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
checked1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/a-
defaultChecked1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/a-
indeterminate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
status n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
type1.1 1.11.0 1.03.0 3.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aReadOnly
value1.0 1.01.0 1.02.0 2.03.02 3.023.0 3.0 n/a n/a1 1 n/a n/aWarning

MethodJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
handleEvent()1.2 1.2 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a n/a-

Event nameJavaScriptJScriptNIEOperaNESECMADOMCSSHTMLNotes
onAfterUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBeforeUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onBlur1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onClick1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onDblClick1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onErrorUpdate n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFilterChange n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onFocus1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a n/aWarning
onHelp n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/aWarning
onKeyDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyPress1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onKeyUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseDown1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseMove1.2 1.23.0 3.04.0 4.04.0 4.0 n/a n/a n/a n/a n/a4.0 4.0Warning
onMouseOut1.1 1.13.0 3.03.0 3.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseOver1.0 1.03.0 3.02.0 2.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onMouseUp1.2 1.23.0 3.04.0 4.04.0 4.03.0 3.0 n/a n/a n/a n/a4.0 4.0Warning
onRowEnter n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-
onRowExit n/a3.0 3.0 n/a4.0 4.0 n/a n/a n/a n/a n/a n/a-

Inheritance chain:

Element object, Input object, Node object