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 ...
随机推荐
- ansible-介绍
常用自动化运维工具 CFengine Chef Puppet 基于Ruby开发,采用C/S架构,扩展性强,基于SSL认证 SaltStack 基于python开发,采用C/S架构,相对于puppet更 ...
- 第3天 | 12天搞定Python,用PyCharm编写代码
有了运行环境还不够,在程序的江湖里,还得有一把趁手的"兵器". 工欲善其事,必先利其器,在进行Python开发时,可选择 IDE挺多的,其中,以PyCharm. Eclipse+P ...
- 1.Linux内核模块编程
1.模块加载程序结构 - 模块加载函数: static int _init init_function(void); module_init(init_function); - 模块卸载函数: sta ...
- day37 Pyhton 网络编程04
# tcp协议和udp协议的选择问题 # tcp # 大量的连续的数据 传递文件\发送邮件 # 文件的传递 # 下载电影 # udp # 短消息类 社交软件 # qq 微信 # 在线播放视频 快会丢帧 ...
- 自定义chrome新标签页
[跳转GitHub] chromeNewTab 自定义chrome新标签页.由于不想发布到chrome应用商店,因此搜了一下不用开发者模式就能用的方法. 使用说明 下载chrome的一个[window ...
- snappy压缩/解压库
snappy snappy是由google开发的压缩/解压C++库,注重压缩速度,压缩后文件大小比其它算法大一些 snappy在64位x86并且是小端的cpu上性能最佳 在Intel(R) Core( ...
- 【学习笔记】扩展卢卡斯定理 exLucas
引子 求 \[C_n^m\ \text{mod}\ p \] 不保证 \(p\) 是质数. 正文 对于传统的 Lucas 定理,必须要求 \(p\) 是质数才行.若 \(p\) 不一定是质数,则需要扩 ...
- 【并查集】BZOJ 1854 连续攻击游戏
题目内容 洛谷链接 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并 ...
- linux-查看内核
[root@localhost vagrant]# uname -r 3.10.0-1127.19.1.el7.x86_64 [root@localhost vagrant]# cat /etc/ ...
- centos mysql5.7安装
1. 安装 1 wget http://repo.mysql.com//mysql57-community-release-el7-11.noarch.rpm 2 rpm -ivh mysql57-c ...