JS如何判断表单中用户选择哪个哪个选项?
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如何判断表单中用户选择哪个哪个选项?的更多相关文章
- 【js】批量判断表单中的文本框非空
方法一: <script type=”text/javascript”> /* * 批量验证表单非空 * 需要非空验证控件的样式class=”mustadd” */ $(".mu ...
- jQuery 判断表单中多个 input text 中至少有一个不为空
html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name ...
- 判断表单中是否含有disabled属性
我想判断input里面是否有disabled.或者选中未选中的selected checked 属性时,需要用 prop() 方法,返回的结果是 true 或 false . attr()这个方 ...
- 使用angular.js获取form表单中的信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在JS中得到表单中各项的值
var form = document.getElementById("change");var pageNo = form.pageno.value;
- js 向form表单中插入数据
var newElement = document.createElement("input"); var nowtime=year+""+month+day+ ...
- 从a站点跳转到b站点,通过url的参数判断是否让该用户选择身份
一.问题的由来 问题是这样子给出来,今天产品那边跟我说,在a网站跳转到b网站时,让用户有一个选择身份的弹窗.因为公司有两个不同站点,你无论在a或者b网站注册后,都可以随便登录这两个站点,进入之后都会有 ...
- 8.javascript获取表单中两个数字,并判断大小
获取表单数据的方式: 1.表单注意些id 2.使用document.getElementById("num").value 获取值 3.一定要注意现在得到是string类型,可以用 ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
随机推荐
- 【开源】Springboot API 一键生成器
Springboot API 一键生成器 写这个项目,最大的想法就是:不做CRUD 程序猿 Springboot 在我们平时开发项目当中,是如此的常用.然而,比如平时我们写的一些: XX 管理系统 X ...
- 女儿拿着小天才电话手表问我App启动流程
前言 首先,new一个女儿, var mDdaughter = new 女儿("6岁","漂亮可爱","健康乖巧","最喜欢玩小天 ...
- 【C语言/C++编程学习笔记】:通俗易懂讲解 - 链表!学不会?不存在的!
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
- 适合刚刚学习编程的萌新:C语言编程学习制作超简单又好玩的报数游戏!
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
- 【Targan+LCA】HDU 3686 Traffic Real Time Query
题目内容 洛谷链接 给出一个\(n\)个节点,\(m\)条边的无向图和两个节点\(s\)和\(t\),问这两个节点的路径中有几个点必须经过. 输入格式 第一行是\(n\)和\(m\). 接下来\(m\ ...
- es 讲义
链接: https://pan.baidu.com/s/193jObXs85OZcvAHDycUXlw 提取码: ewbp
- spring boot:使mybatis访问多个druid数据源(spring boot 2.3.2)
一,为什么要使用多个数据源? 1,什么情况下需要使用多个数据源? 当我们需要访问不同的数据库时,则需要配置配置多个数据源, 例如:电商的业务数据库(包括用户/商品/订单等) 和统 ...
- 理解 PHP 依赖注入 和 控制反转
理解 PHP 依赖注入 和 控制反转 要想理解 PHP 依赖注入 和 控制反转 两个概念,就必须搞清楚如下的两个问题: DI -- Dependency Injection 依赖注入 IoC -- ...
- 2018HUAS_ACM暑假比赛5题解
目录 Problem A Problem B Problem C Problem D Problem E Problem F Problem A 思路 这是一道带权并查集问题 因为只有三种种类,我们分 ...
- Bitmap缩放(二)
先得到位图宽高不用加载位图,然后按ImageView比例缩放,得到缩放的尺寸进行压缩并加载位图.inSampleSize是缩放多少倍,小于1默认是1,通过调节其inSampleSize参数,比如调节为 ...