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. vs code个性化设置

    文件=>首选项=>设置,直接在搜索栏搜索有背景色的部分即可 1. 鼠标滚轮缩放 "editor.mouseWheelZoom": true 2. 显示空格和tab符号 ...

  2. day28 Pyhton 面向对象 继承

    1.昨日回顾 类的命名空间 静态属性\动态属性(方法) 对象的命名空间 #对象的属性 #类指针:对象能够通过这个类指针找到类 #静态属性:属于类,多个对象共享这个资源 #尽量用类名来操作静态属性 #对 ...

  3. spring boot: 设计接口站api的版本号,支持次版本号(spring boot 2.3.2)

    一,为什么接口站的api要使用版本号? 1,当服务端接口的功能发生改进后, 客户端如果不更新版本,    则服务端返回的功能可能不能使用,    所以在服务端功能升级后,     客户端也要相应的使用 ...

  4. Java9系列第6篇-Stream流API的增强

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  5. form单提交后按钮变成失效变灰

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. B站弹幕爬取

    B站弹幕爬取 单个视频弹幕的爬取 ​ B站弹幕都是以xml文件的形式存在的,而xml文件的请求地址是如下形式: http://comment.bilibili.com/233182992.xml ​ ...

  7. Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  8. if else 太多?看我用 Java 8 轻松干掉!

    之前我用 Java 8 写了一段逻辑,就是类似下面这样的例子: /* * 来源公众号:Java技术栈 */ if(xxxOrder != null){ if(xxxOrder.getXxxShippi ...

  9. s == t 何解?

    Integer s=new Integer(9); Integer t=new Integer(9); Long u=new Long(9);     (s==t) 这个是错的,只要有new这个关键字 ...

  10. HashMap 中的哈希值计算问题

    date: 2020-08-21 16:48:00 updated: 2020-08-21 16:52:00 HashMap 中的哈希值计算问题 1. hash 计算 JDK1.8 HashMap源码 ...