本文详细介绍了HTML表单中Radio按钮的定义、属性及事件处理等内容，并通过两个实例展示了如何设置Radio按钮组来实现不同的功能。
radio object
A set of radio buttons on an htm form. A set of radio buttons lets the user choose one item from a list.
语法
To define a set of radio buttons, use standard htm 语法 with the addition of the onClick event handler:
<INPUT TYPE="radio" NAME="radioName" VALUE="buttonValue" [CHECKED] [onClick="handlerText"]> textToDisplay
NAME="radioName" specifies the name of the radio object. All radio buttons in a group have the same NAME attribute. You can access this value using the name property. VALUE="buttonValue" specifies a value that is returned to the server when the radio button is selected and the form is submitted. This defaults to "on". You can access this value using the value property. CHECKED specifies that the radio button is selected. You can access this value using the defaultChecked property. textToDisplay specifies the label to display beside the radio button.
To use a radio button's properties and 用法:
1. radioName[index1].propertyName 2. radioName[index1].methodName(parameters) 3. formName.elements[index2].propertyName 4. formName.elements[index2].methodName(parameters)
radioName is the value of the NAME attribute of a radio object. index1 is an integer representing a radio button in a radio object. formName is either the value of the NAME attribute of a form object or an element in the forms array. index2 is an integer representing a radio button on a form. The elements array contains an entry for each radio button in a radio object. propertyName is one of the properties listed below. methodName is one of the 用法 listed below.
Property of
form描述
A radio object on a form looks as follows:
Properties
checked lets you programatically select a radio button defaultChecked reflects the CHECKED attribute length reflects the number of radio buttons in a radio object name reflects the NAME attribute value reflects the VALUE attribute用法
clickEvent handlers
onClick例子
Example 1. The following example defines a radio button group to choose among three music catalogs. Each radio button is given the same name, NAME="musicChoice", forming a group of buttons for which only one choice can be selected. The example also defines a text field that defaults to what was chosen via the radio buttons but that allows the user to type a nonstandard catalog name as well. The onClick event handler sets the catalog name input field when the user clicks a radio button.
相关 the example for the link object.
相关
R&B Jazz Soul
A radio object is a form element and must be defined within a <FORM> tag.
All radio buttons in a radio button group use the same name property. To access the individual radio buttons in your code, follow the object name with an index starting from zero, one for each button the same way you would for an array such as forms: document.forms[0].radioName[0] is the first, document.forms[0].radioName[1] is the second, etc.
Properties
checked lets you programatically select a radio button defaultChecked reflects the CHECKED attribute length reflects the number of radio buttons in a radio object name reflects the NAME attribute value reflects the VALUE attribute用法
clickEvent handlers
onClick例子
Example 1. The following example defines a radio button group to choose among three music catalogs. Each radio button is given the same name, NAME="musicChoice", forming a group of buttons for which only one choice can be selected. The example also defines a text field that defaults to what was chosen via the radio buttons but that allows the user to type a nonstandard catalog name as well. The onClick event handler sets the catalog name input field when the user clicks a radio button.
<INPUT TYPE="text" NAME="catalog" SIZE="20">
<INPUT TYPE="radio" NAME="musicChoice" VALUE="soul-and-r&b"
onClick="musicForm.catalog.value = 'soul-and-r&b'"> Soul and R&B
<INPUT TYPE="radio" NAME="musicChoice" VALUE="jazz"
onClick="musicForm.catalog.value = 'jazz'"> Jazz
<INPUT TYPE="radio" NAME="musicChoice" VALUE="classical"
onClick="musicForm.catalog.value = 'classical'"> Classical
Example 2. The following example contains a form with three text boxes and three radio buttons. The radio buttons let the user choose whether the text fields are converted to upper case or lower case, or not converted at all. Each text field has an onChange event handler that converts the field value depending on which radio button is checked. The radio buttons for upper case and lower case have onClick event handlers that convert all fields when the user clicks the radio button.
<htm>
<HEAD>
<TITLE>Radio object example</TITLE>
</HEAD>
<script>
function convertField(field) {
if (document.form1.conversion[0].checked) {
field.value = field.value.toUpperCase()}
else {
if (document.form1.conversion[1].checked) {
field.value = field.value.toLowerCase()}
}
}
function convertAllFields(caseChange) {
if (caseChange=="upper") {
document.form1.lastName.value = document.form1.lastName.value.toUpperCase()
document.form1.firstName.value = document.form1.firstName.value.toUpperCase()
document.form1.cityName.value = document.form1.cityName.value.toUpperCase()}
else {
document.form1.lastName.value = document.form1.lastName.value.toLowerCase()
document.form1.firstName.value = document.form1.firstName.value.toLowerCase()
document.form1.cityName.value = document.form1.cityName.value.toLowerCase()
}
}
</script>
<BODY>
<FORM NAME="form1">
<B>Last name:</B>
<INPUT TYPE="text" NAME="lastName" SIZE=20 onChange="convertField(this)">
<BR><B>First name:</B>
<INPUT TYPE="text" NAME="firstName" SIZE=20 onChange="convertField(this)">
<BR><B>City:</B>
<INPUT TYPE="text" NAME="cityName" SIZE=20 onChange="convertField(this)">
<P><B>Convert values to:</B>
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="upper"
onClick="if (this.checked) {convertAllFields('upper')}"> Upper case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="lower"
onClick="if (this.checked) {convertAllFields('lower')}"> Lower case
<BR><INPUT TYPE="radio" NAME="conversion" VALUE="noChange"> No conversion
</FORM>
</BODY>
</htm>
相关 the example for the link object.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
