Check Boxes and Radio Buttons

Check Boxes and Radio Buttons

All web users are familiar with check boxes and radio buttonscheck boxes enable you to select a number of items in a list, and radio buttons enable you to select one item in a list. You can see the properties, methods, and events of check boxes and radio buttons in Table 12.9 in overview, their properties in depth in Table 12.10, their methods in depth in Table 12.11, and their events in Table 12.12. Note that JavaScript's core HTML properties, methods, and events (such as onclick ), as covered in Chapters 5 and 6, also apply to these controls.

Table 12.9. Overview of the Properties, Methods, and Events of the Check Box and Radio Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Properties	Methods	Events
checked	click	onafterupdate
defaultChecked	createTextRange	onbeforeupdate
defaultValue	select	onerrorupdate
form
indeterminate
name
size
status
type
value

Table 12.10. The Properties of the Check Box and Radio Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Property	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
checked	x	x	x	x	x	x	x	x	x	x
	Read/write
	This Boolean property is true if a check box or radio button is checked, and false otherwise . You can set this property under programmatic control, which is cool.
defaultChecked	x	x	x	x	x	x	x	x	x	x
	Read-only
	Boolean that indicates whether the check box or radio button appears initially checked.
defaultValue	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds the default value of the check box or radio button as a string. This is the value that will be used if the reset button (if there is one) is clicked in a form.
form	x	x	x	x	x	x	x	x	x	x
	Read-only
	This property holds the form that the check box or radio button is a member of. Useful if you want to access other controls in the same form.
indeterminate							x	x	x	x
	Read/write
	Setting the indeterminate property to true causes the check box to appear checked and dimmed, indicating an "indeterminate" state.
name	x	x	x	x	x	x	x	x	x	x
	Read/write
	This property holds the name of the check box or radio button as a string, as set with the NAME attribute. Note that you can change the name of the check box or radio button in code, because this property is read/write.
size	x	x	x	x	x	x	x	x	x	x
	Read/write
	Sets or retrieves the size of the control, in characters . Set to an integer.
status							x	x	x	x
	Read/write
	Sets or gets a value indicating whether a check box or radio button is selected. May be a Boolean with these values: false (the defaultthe control is not selected), true (the control is selected), or null (the control is not initialized ).
type		x	x	x			x	x	x	x
	Read-only
	This property holds the control's type, as set with the TYPE attribute in an <INPUT> element. Holds the string "checkbox" or "radio" . For an example, see "Using Radio Buttons" in this chapter. As of Internet Explorer 5, the type property is read/write, but only once, when an element is created with the createElement method and before it is added to the document.
value	x	x	x	x	x	x	x	x	x	x
	Read/write
	Holds a string that you want to associate with the check box or radio button as the value of that control. When the form is sent to a CGI script, this string is sent to the CGI script as the check box's or radio button's value if the check box or radio button is selected. The CGI script is able to access a control's value from the data it is passed, which includes a substring of the form controlName = value for each named control. In this way, you can pass data for each check box or radio button (not just true/false values)for example, if you gave a group of radio buttons the same name (to make them operate as a group) but gave each radio button a different value (such as the days of the week), you can determine which radio button was selected.

Table 12.11. The Methods of the Check Box and Radio Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to this element.)

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
click	x	x	x	x	x	x	x	x	x	x
	Returns: Nothing
	Simulates clicking a check box or radio button.
	Syntax: click() . Causes the onclick event to occur.
createTextRange							x	x	x	x
	Returns: TextRange object
	Creates a TextRange object for the check box or radio button.
	Syntax: createTextRange() . More on TextRange objects in Chapter 11.
select							x	x	x	x
	Returns: Nothing
	Selects the control (does not affect whether the control is checked).
	Syntax: select() .

Table 12.12. The Events of the Check Box and Radio Button Elements (See Chapters 5 and 6 for the JavaScript core HTML properties, methods, and events that also apply to these elements.)

Method	NS2	NS3	NS4	NS6	IE3a	IE3b	IE4	IE5	IE5.5	IE6
onafterupdate							x	x	x	x
	Occurs in a data-bound object after updating the data in the data source.
onbeforeupdate							x	x	x	x
	Occurs in a data-bound object before updating the data in the data source.
onerrorupdate							x	x	x	x
	Occurs in a data-bound object when an error happened while updating data in the data source.