JS如何判断表单中用户选择哪个哪个选项?

HTML代码:

<form name="form1" onsubmit="return foo();">

    A<input type="radio" name="radioGroup" value="a" />

    B<input type="radio" name="radioGroup" value="b" />

    C<input type="radio" name="radioGroup"   />

    D<input type="radio" name="radioGroup" />

    E<input type="radio" name="radioGroup" />

    F<input type="radio" name="radioGroup" />

    <input type="submit" />

  </form>

方法一:元素集合转换为数组实例,根据当前元素在数组中对应的索引位置判断元素。

    var aInput = document.getElementsByTagName("input");
var arry = [];
var nowIndex = null;
for (var i = 0; i < aInput.length-1; i++) {
arry[i] = aInput[i];
aInput[i].onclick = function () {
nowIndex = arry.indexOf(this);
console.log("点击了第" + nowIndex + "个选项。");
}
}
function foo() {
alert(nowIndex+1);
}

方法二:通过input元素的value值来判断点击的元素索引,缺陷是此方法不如第一种方法灵活,移植性较差。

    function foo() {
alert(nowIndex+1)
}
var aInput = document.getElementsByTagName("input");
var arry = [];
var nowIndex = null;
for (var i = 0; i < aInput.length-1; i++) { aInput[i].onclick = function () { var optValue = this["value"];
switch (optValue) {
case "a":
nowIndex = 0;
break;
case "b":
nowIndex = 1;
break;
case "c":
nowIndex = 2;
break;
case "d":
nowIndex = 3;
break;
case "e":
nowIndex = 4;
break;
case "f":
nowIndex = 5;
break;
default:
nowIndex = null;
; }
console.log("点击了第" + nowIndex + "个选项。");
}
}

  

JS如何判断表单中用户选择哪个哪个选项?的更多相关文章

  1. 【js】批量判断表单中的文本框非空

    方法一: <script type=”text/javascript”> /* * 批量验证表单非空 * 需要非空验证控件的样式class=”mustadd” */ $(".mu ...

  2. jQuery 判断表单中多个 input text 中至少有一个不为空

    html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name ...

  3. 判断表单中是否含有disabled属性

    我想判断input里面是否有disabled.或者选中未选中的selected  checked 属性时,需要用  prop()  方法,返回的结果是 true 或 false . attr()这个方 ...

  4. 使用angular.js获取form表单中的信息

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 在JS中得到表单中各项的值

    var form = document.getElementById("change");var pageNo = form.pageno.value;

  6. js 向form表单中插入数据

    var newElement = document.createElement("input"); var nowtime=year+""+month+day+ ...

  7. 从a站点跳转到b站点,通过url的参数判断是否让该用户选择身份

    一.问题的由来 问题是这样子给出来,今天产品那边跟我说,在a网站跳转到b网站时,让用户有一个选择身份的弹窗.因为公司有两个不同站点,你无论在a或者b网站注册后,都可以随便登录这两个站点,进入之后都会有 ...

  8. 8.javascript获取表单中两个数字,并判断大小

    获取表单数据的方式: 1.表单注意些id 2.使用document.getElementById("num").value 获取值 3.一定要注意现在得到是string类型,可以用 ...

  9. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

随机推荐

  1. Cesium.Viewer

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  2. MySQL - 常用三种数据库存储引擎

    数据库存储引擎:是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建.查询.更新和删除数据.不同的存储引擎提供不同的存储机制.索引技巧.锁定水平等功能,使用不同的存储引擎,还可以获得特 ...

  3. 多测师讲解自动化 _邮件发送_高级讲师肖sir

    第一步.进入如下网址申请163邮箱. https://mail.163.com/ 第二步.注册完之后登录.点击如下图设置­点击POP3/SMTP/IMAP. 第三步.右侧点击客户端授权密码. 第四步. ...

  4. 多测师讲解python _unttest框架001(基本格式)_高级讲师肖sir

    1.unittest基本介绍 import unittest #导入unittest模块 #class Test(unittest.TestCase): def setUp(self): #创建dri ...

  5. win8怎样才能启用administrator登录 别的用户也是如此

    但是你可以用命令调出administrator账户打开C盘,打开windows文件夹,再打开system32文件夹,找到cmd.exe右键点击选择以管理员身份运行 在里面输入net user admi ...

  6. Python初识和变量基础

    Python是面向对象,动态解释型和强类型的语言 编译型: 将代码一次性全部编译成二进制,然后再执行 优点:执行效率高. 缺点:开发效率低. 代表语言:C 解释型: 逐行解释成二进制,逐行运行 优点: ...

  7. 安装 Linux 系统基础知识概要

    虚拟化软件,建议使用 Vmware Workstation 虚拟硬件配置CPU:2核或更多内存:1G以上,推荐2G硬盘:一块硬盘,200G (虚拟大小)网卡:NAT模式 (桥接在外部网络变化时,无法访 ...

  8. 接口中字段的修饰符:public static final(默认不写) 接口中方法的修饰符:public abstract(默认不写)abstract只能修饰类和方法 不能修饰字段

    abstract只能修饰类和方法 不能修饰字段

  9. Parquet 源码解析

    date: 2020-07-20 16:15:00 updated: 2020-07-27 13:40:00 Parquet 源码解析 Parquet文件是以二进制方式存储的,所以是不可以直接读取的, ...

  10. 最新主流 Markdown 编辑器推荐

    Markdown ,2004年由 John Gruberis 设计和开发,是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,以下将介绍目前比较流行的一 ...