`
ilusm
  • 浏览: 106556 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript:radio object

JavaScriptAccess
阅读更多

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.

  • 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
    • 分享到：
    | JavaScript控制页面元素显示隐藏
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

    相关推荐

      控制台报错object is not a function的解决方法

      打开控制台发现报错：object is not a function。 感觉很奇怪，这块的功能最新没动过怎么会突然出问题了呢？上线时主流浏览器都测试过了呀。 虽然奇怪，但是还的解决问题。看着代码发现一个radio对象的name属性和一...

      JavaScript语言参考手册

      内含： JavaScript语言参考手册.pdf (主要资源) 另外附上： ...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法 索引

      JavaScript权威指南

      Object-Oriented JavaScript Section 8.6. Objects as Associative Arrays Section 8.7. Object Properties and Methods Chapter 9. Arrays Section 9.1. Arrays and Array Elements Section 9.2. ...

      JavaScript中文参考手册

      【下一章】 【索引】 【这是目录】 ---------------------------------------...netscape.javascript.JSObject 方法和静态方法 netscape.javascript.JSException 构造函数 netscape.plugin.Plugin 构造函数和方法

      pear-config-admin::sparkles:pear-config前端配置系统管理端

      梨配置 前端配置系统，包括但不限于：多语言，图片，文案，链接，时间，活动开关，业务逻辑等功能配置。 ，实现一键变更。 :sparkles: 特征 :rainbow:基于业务需求编写json-schema配置 ... " radio " : {

      pseudoNatural:将值设置为INPUTS类型CHECKBOX和RADIO

      伪自然将值设置为INPUTS类型CHECKBOX和RADIO 此类使INPUT元素类型RADIO和CHECKBOX可以更自然地充当具有文本类型的输入元素的值0 =假1 =真依存关系没有任何安装手动下载带有JavaScript文件的软件包： &lt; script src...

      JavaScript检查表单是否为空的函数

       // text类型的input集合 var radioList = new Object(); // radio类型的input集合，因为Radio比较特殊，要一组一组检测，所以这里用一个Hashtable，根据radio的name作为Key来保存所有的Radio集合 var ...

      JS组件Bootstrap Table使用方法详解

      bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy &lt;table data-toggle="table"&gt; &lt;thead&gt; ... ...

      jQuery详细教程

      某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 亲自试一...

      正则表达式

      JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. 在JavaScript中,正则表达式是由一个RegExp对象表示的.当然,可以使用一个RegExp()构造函数来创建RegExp...

      jquery-1.1.3 效率提高800%

      data 数据类型: Object,String 要发送给服务器的数据。如果不是字符串，那么它会被转化为一个查询字符串。在GET请求中它被添加到url的末尾。要防止这种自动转化，请查看processData选项。 数据对象必须是一...

      天涯易栈VC++网页操作类

      //设置单选框(radio)选中状态,第一个参数填写第几个单选框(radio)第二个添写是否选中（1为选中，0为未选中） CString GetRadioName(int i);//获取指定索引单选框(radio)元素name(名称) CString GetRadioId(int i);//...

      flow-components-harness:[废弃] Flow Components UI控件的可视化测试工具

      ！！注意！！ 这个包仍然是 WIP。 一旦包裹准备好，我会更新信息。 流动组件线束 可视化测试工具。 灵感来自 。...在开发您自己的您可能希望在隔离的上下文中测试它们。...it.radio it.boolean it.text 执照 麻省理工

      flash批量上传 php

      &lt;script language="JavaScript" type="text/javascript"&gt; 02.function challs_flash_update(){ //Flash 初始化函数 03.var a={}; 04.//定义变量为Object 类型 05. 06.a.FormName = "Filedata"; 07.//设置Form表单的...

      json-schema-editor:JSON数据可视化JSONSchema, 主要用于json结构格式的可视化编辑

      技术栈：React/Mobx/Ant Design特点：支持12种基础类型组件（input、boolean、 date、date-time、 time、 url、textarea、number、color、radio、 select、single-select）支持11个特殊类型组件（object、array、...

      ExtAspNet_v2.3.2_dll

      目标是创建没有ViewState，没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源...

      json-editor:JSON数据可视化JSONEditor, 可视化界面编辑json数据内容

      支持11个特殊类型组件（object、array、json、datasource、dynamic-data、event、 codearea、htmlarea、text-editor()、quantity、box-style） 支持json转schema能力，当schemaData为空而jsonDat

      ExtAspNet v2.2.1 （2009-4-1） 值得一看

      目标是创建没有JavaScript，没有CSS，没有UpdatePanel，没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注：ExtAspNet基于一些开源的程序ExtJS, ...

      grapejs-blocks-bootstrap4:对Bootstrap 4的其他插件进行调整

      GrapesJS Bootstrap v4块插件概括插件名称： grapesjs-blocks-bootstrap4 组件（有关块列表，请参阅选项） 布局container row column column_break media_object media_body 组件alert tabs badge card card_...

    Magicbox
    Global site tag (gtag.js) - Google Analytics