WEB开发网
开发学院网页设计JavaScript Reset object example 阅读

Reset object example

 2007-11-27 17:51:02 来源:WEB开发网   
核心提示: radio objectA 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 st
 

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 buttons properties and 用法:

1. radioName[index1].propertyName2. radioName[index1].methodName(parameters)3. formName.elements[index2].propertyName4. 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:

    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

    用法

  • 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><body><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) &#123;convertAllFields(upper)&#125;> Upper case<br/><INPUT TYPE=radio NAME=conversion VALUE=lower onClick=if (this.checked) &#123;convertAllFields(lower)&#125;> 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

    random method

    Returns a pseudo-random number between zero and one. This method is available on Unix platforms only.

    语法

    Math.random()

    Method of

    Math

    例子

    //Displays a random number between 0 and 1document.write(The random number is  + Math.random())

    referrer property

    Specifies the URL of the calling document when a user clicks a link.

    语法

    document.referrer

    Property of

    document

    描述

    When a user navigates to a destination document by clicking a link object on a source document, the referrer property contains the URL of the source document. Evaluate the referrer property from the destination document.

    referrer is a read-only property.

    例子

    In the following example, the getReferrer() function is called from the destination document. It returns the URL of the source document.

    function getReferrer() {   return document.referrer}

    reset object

    A reset button on an htm form. A reset button resets all elements in a form to their defaults.

    语法

    To define a reset button, use standard htm 语法 with the addition of the onClick event handler:

    <INPUT   TYPE=reset   NAME=resetName   VALUE=buttonText   [onClick=handlerText]>
    NAME=resetName specifies the name of the reset object. You can access this value using the name property.
    VALUE=buttonText specifies the text to display on the button face. You can access this value using the value property.

    To use a reset objects properties and 用法:

    1. resetName.propertyName2. resetName.methodName(parameters)3. formName.elements[index].propertyName4. formName.elements[index].methodName(parameters)
    resetName is the value of the NAME attribute of a reset object.
    formName is either the value of the NAME attribute of a form object or an element in the forms array.
    index is an integer representing a reset object on a form.
    propertyName is one of the properties listed below.
    methodName is one of the 用法 listed below.

    Property of

  • form

    描述

    A reset object on a form looks as follows:

    A reset object is a form element and must be defined within a <FORM> tag.

    The reset buttons onClick event handler cannot prevent a form from being reset; once the button is clicked, the reset cannot be canceled.

    Properties

  • name reflects the NAME attribute
  • value reflects the VALUE attribute

    用法

  • click

    Event handlers

  • onClick

    例子

    Example 1. The following example displays a text object with the default value CA and a reset button with the text Clear Form displayed on its face. If the user types a state abbreviation in the text object and then clicks the Clear Form button, the original value of CA is restored.

    <B>State: </B><INPUT TYPE=text NAME=state VALUE=CA SIZE=2><p><INPUT TYPE=reset VALUE=Clear Form>

    Example 2. The following example displays two text objects, a select object, and three radio buttons; all of these objects have default values. The form also has a reset button with the text Defaults on its face. If the user changes the value of any of the objects and then clicks the Defaults button, the original values are restored.

    <htm><HEAD><TITLE>Reset object example</TITLE></HEAD><body><br/><B>City: </B><INPUT TYPE=text NAME=city VALUE=Santa Cruz SIZE=20><B>State: </B><INPUT TYPE=text NAME=state VALUE=CA SIZE=2><p><SELECT NAME=colorChoice> <OPTION SELECTED> Blue <OPTION> Yellow <OPTION> Green <OPTION> Red</SELECT><p><INPUT TYPE=radio NAME=musicChoice VALUE=soul-and-r&b CHECKED> Soul and R&B<br/><INPUT TYPE=radio NAME=musicChoice VALUE=jazz> Jazz<br/><INPUT TYPE=radio NAME=musicChoice VALUE=classical> Classical<p><INPUT TYPE=reset VALUE=Defaults NAME=reset1></FORM></BODY></htm>

    相关

  • button, form, and submit objects

    round method

    Returns the value of a number rounded to the nearest integer.

    语法

    Math.round(number)
    number is any numeric expression or a property of an existing object.

    Method of

    Math

    描述

    If the fractional portion of number is .5 or greater, the argument is rounded to the next highest integer. If the fractional portion of number is less than .5, the argument is rounded to the next lowest integer.

    例子

    //Displays the value 20document.write(The rounded value is  + Math.round(20.49))//Displays the value 21document.write(<P>The rounded value is  + Math.round(20.5))//Displays the value -20document.write(<P>The rounded value is  + Math.round(-20.5))//Displays the value -21document.write(<P>The rounded value is  + Math.round(-20.51))

    Last modified 01/01/1998 23:54:50

  • Tags:Reset object example

    编辑录入:coldstar [复制链接] [打 印]
    赞助商链接