`
ilusm
  • 浏览: 107343 次
  • 性别: 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编程.pdf

      - **DOM**：Document Object Model，文档对象模型，是一种表示 HTML 和 XML 文档的标准模型，可以对文档进行创建、修改和删除等操作。 - **模型图**：通常以树状结构表示文档的结构。 #### 3.3 单选钮和多选钮的...

      JavaScript语言参考手册

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

      一些公用的javascript函数(希望大家一起开源).txt

      var radioObject = document.getElementsByName(name); if (value === "") { radioObject[0].checked = true; return; } for (var i = 0; i &lt; radioObject.length; i++) { if (radioObject[i].value === ...

      JavaScript语法一览表

      &lt;input type="radio" name="objectname" value="buttonvalue" [checked] [onclick="handlertext"]&gt; ``` - **描述**：创建一个单选按钮，可以设置名称、值、是否默认选中及点击时触发的JavaScript函数。 - **应用...

      JavaScript中文参考手册

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

      javascript+html5学习笔记

      - `radio`: 单选按钮。 - `submit`: 提交按钮。 **表单处理：** - `action` 属性指定处理表单数据的服务器端脚本。 **示例代码：** ```html &lt;label for="fname"&gt;First name:&lt;/label&gt;&lt;br&gt; ...

      JS控件，JAVASCRIPT控件，实用控件！

      1. **基本输入控件**：如文本输入框（input[type="text"]）、密码输入框（input[type="password"]）、单选按钮（input[type="radio"]）、复选框（input[type="checkbox"]）等，用于获取用户输入。 2. **选择控件**...

      javascript课程总体知识轮廓(ldh).doc

      JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，JavaScript原生支持JSON对象。可以使用`JSON.parse()`解析JSON字符串为JavaScript对象，`JSON.stringify()`将JavaScript对象转换为JSON字符串。 ...

      javascript中的小技巧

      let radioButton = document.forms[0].radioName[0]; console.log(radioButton.checked); // 输出true或false ``` #### 34. 获取下拉列表的值 获取下拉列表的选定值。 **示例：** ```javascript let ...

      js和html部分代码集.doc

      3. JavaScript DOM操作：JavaScript可以通过DOM（Document Object Model）来访问和操作HTML文档的元素。 三、CSS基础知识点 1. CSS基础语法：CSS基础语法包括选择器、属性、值等。 2. CSS样式：常用的CSS样式包括...

      原生javascript自定义input[type=radio]效果示例

      在给定的代码片段中，提到了JavaScript的`Object.prototype.siblings`方法。这个方法的目的是为了寻找并返回一个元素的兄弟节点。在操作单选按钮时，这个概念是非常重要的。通常需要访问兄弟元素来实现单选按钮的...

      轻松学习javascript

      **文档对象模型**(Document Object Model, DOM)是一种用于表示和操作文档的标准编程接口。在JavaScript中，DOM被广泛用于访问、修改HTML页面的内容和结构。 - **获取元素**：`document.getElementById()`, `...

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

      本篇文章将详细介绍一个JavaScript函数，该函数可以用于检查表单中的文本框（`&lt;input type="text"&gt;`）是否为空以及检查单选按钮（`&lt;input type="radio"&gt;`）或复选框（`&lt;input type="checkbox"&gt;`）是否被选中。...

      javascript经典特效---更方便的单选框.rar

      在JavaScript中，我们可以使用DOM（Document Object Model）接口来操作HTML元素，包括单选框。通过获取单选框的引用，我们可以监听其状态变化，添加或删除特定样式，以及实现自定义的验证逻辑。例如，当用户点击某个...

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