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. | |