radio object

最新推荐文章于 2025-06-07 15:37:18 发布

ilusm

最新推荐文章于 2025-06-07 15:37:18 发布

阅读量721

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript Object 文章标签： button object input parameters properties access

本文链接：https://blog.csdn.net/ilusm/article/details/2602900

JavaScript Object 专栏收录该内容

1 篇文章

订阅专栏

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
用法
click
Event 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.

相关
checkbox, form, and select objects

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.