`

如何获取Web页面中radio按钮的值

阅读更多
如果在web页面的表单(表单名form1)里用了一组radio按钮,起名为button1。
要从js中取得被选中按钮对应的值,可按以下方法:
<script language=javascript>
function getRadioValue()
{
    var str;
    for(i=0;i<document.form1.button1.length;i++)
    {
        if (document.form1.button1[i].checked)
        str=document.form1.button1[i].value;
    }
}
</script>
这里的radio名button1就相当一个数组名


相关的例子:
<input type="radio" name="RadioButtn" value="A" checked>One<br><input type="radio" name="RadioButtn" value="B">Two<br><input type="radio" name="RadioButtn" value="C">Three<br><input type="radio" name="RadioButtn" value="D">Four所有的4个单选按钮对象有同一个名字:RadioButtn,这样一来,
HTML和JavaScript就知道它们是同一个数组里的对象。其次,
每个选项的值是选项的别名,并不是看到的文字(例如“One”、“Two”等)。

为了得到选择的选项的值,首先要知道哪个选项被选中了,然后在alert语句中,
用那个选中的选项的下标值来正确地引用当前选项的值。也就是说,
如果第一个选项被选中,你应该取RadioButtn[0].value,如果第二个选项被选中,
你就应该取RadioButtn[1].value,依此类推。

在JavaScript中,某些类型的域具有selectedIndex属性,
代表当前选中选项的数组下标值。然而单选按钮并不是那么幸运,
同样,复选框也没能逃脱厄运。要想得到当前选中的单选按钮的值,
你必须在RadioButtn数组元素中查找“checked”属性。

下面是按钮的代码:

var doc = document.forms[0];
for(i = 0; i < doc.RadioButtn.length; i++)
{
 if(doc.RadioButtn[i].checked)
 {
 alert(doc.RadioButtn[i].value);
 break;
 }
}

分享到:
评论

相关推荐

    SDR Web Radio-crx插件

    此Chrome扩展程序首先打算在chrome浏览器中激活WebSDR.org服务器页面的音频,但您也可以使用静音,静噪,自动陷波以及按钮来控制频率,音量和调制方式选择器。 某些功能(如粘性)可能无法在经过修改的websdr.org...

    Radio.db0:使用 PHP 和 Javascript 听音乐的简单 Web 界面

    在您喜欢的 Web 浏览器中打开 index.php 页面。 单击“全部”以浏览文件和目录。 目录旁边的播放按钮打开音乐播放器,将所有歌曲及其子目录打开。 文件旁边的播放按钮为所选歌曲打开音乐播放器。 文件旁边的下载...

    李兴华Java Web开发实战经典.pdf (高清版) Part1

    MLDN 李兴华 Java Web 开发实战经典.pdf (高清版) 全书分为两部分,需 要全部下载下载一起解压,此部分为第一部分 带有书签,清华大学出版社 第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    MLDN+李兴华+Java+Web开发实战经典.part3.rar )

    MLDN 李兴华 Java Web 开发实战经典.pdf (高清版) 带有书签,清华大学出版社 第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 1.3、JAVA EE架构 1.4、JAVA EE核心设计模式 1.5、Struts开发...

    李兴华Java Web开发实战经典(高清版) Part2

    MLDN 李兴华 Java Web 开发实战经典.pdf (高清版) 全书分为两部分,需 要全部下载下载一起解压,此部分为第二部分 带有书签,清华大学出版社 第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 ...

    ExtAspNet_v2.3.2_dll

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    李兴华 Java Web 开发实战经典_带源码_高清pdf 带书签 上

    第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 1.3、JAVA EE架构 1.4、JAVA EE核心设计模式 1.5、Struts开发框架 1.6、本章摘要 1.7、开发实战讲解 第2章 HTML、JavaScript简介 2.1、服务器...

    《Vue.js实战》 调查问卷 webapp练习(无样式)

    Vue.js实践书中的练习题:调查问卷,你值得拥有 1、page: 组件+slot:每一个页面,分三部分:标题、内容、...2、radio 单选按钮组件 3、checkbox 多选按钮组件 4、textareaEnhance: 文本域增强组件 5、btn:按钮组件

    html入门到放弃笔记

    3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、...

    java web 视频、电子书、源码(李兴华老师出版)

    16.4.3、&lt;html:radio&gt;标签 16.4.5、标签 16.4.6、标签 16.4.7、按钮标签 16.4.8、实例:编写基本表单 16.4.9、复选框标签 16.4.10、下拉列表框 16.5、本章摘要 16.6、开发实战讲解(JSP + Oracle) ...

    李兴华 Java Web 开发实战经典 高清扫描版Part3

    第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 1.3、JAVA EE架构 1.4、JAVA EE核心设计模式 1.5、Struts开发框架 1.6、本章摘要 1.7、开发实战讲解 第2章 HTML、JavaScript简介 2.1、服务器...

    李兴华 java_web开发实战经典 源码 完整版收集共享

    第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 1.3、JAVA EE架构 1.4、JAVA EE核心设计模式 1.5、Struts开发框架 1.6、本章摘要 1.7、开发实战讲解 第2章 HTML、JavaScript简介 2.1、服务器...

    精通AngularJS part1

    它是一套JavaScript前端框架,用于开发当下流行的数据驱动的单页面Web应用。其核心特性是:MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。 作者简介 Pawel Kozlowski有15年以上的Web开发经验,接触过...

    李兴华 Java Web 开发实战经典_带源码_高清pdf 带书签 下

    第1章 JAVA WEB开发简介 1.1、WEB发展历程 1.2、企业开发架构 1.3、JAVA EE架构 1.4、JAVA EE核心设计模式 1.5、Struts开发框架 1.6、本章摘要 1.7、开发实战讲解 第2章 HTML、JavaScript简介 2.1、服务器...

    fckedit编辑器

    将FCKeditor-2.3.zip压缩包中\web\WEB-INF\目录下的web.xml文件合并到项目的\WEB-INF\目录下的web.xml文件中 5. 修改合并后的web.xml文件 修改合并后的web.xml文件,将名为SimpleUploader的Servlet的enabled参数...

    从入门到精通HTML5——PDF——网盘链接

     9.3.3 单选按钮——radio 188  9.3.4 复选框——checkbox 189  9.3.5 普通按钮——button 190  9.3.6 提交按钮——submit 191  9.3.7 重置按钮——reset 192  9.3.8 图像域——image 193  9.3.9 隐藏...

    AxureRP-Pro-5.6安装文件+破解+汉化+模板+官方教程

    示意图(Wireframe) Axure RP内建了许多会经常使用到的widget元件,例如:按钮(Button)、图片(Image)、文字面板(Text Panel)、选择钮(Radio Button)、下拉式菜单(Droplist)。  三.流程图(Flowchart)...

    javascript_高级编程

    第7 章按钮对象. 7.21 button、submit、reset 对象. 7.22 复选框对象 7.23 Radio 对象 第8 章选择和隐藏对象. 8.24 select 对象 8.25 隐含对象 第9 章 location 对象. 9.26 hash 属性 9.27 Href 属性 9.28 ...

Global site tag (gtag.js) - Google Analytics