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. 如何让程序像人一样的去批量下载歌曲?Python爬取付费歌曲

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 今天来教大家一个自动化爬虫的工具 selenium selenium Se ...

  2. Python+Appium自动化测试(4)-使用weditor进行元素定位

    一,weditor的安装与使用 首选需要在电脑上配置好Python环境 下载安装命令如下,加上镜像下载速度更快: pip install weditor -i https://pypi.tuna.ts ...

  3. 实验报告系列:实验一 HTML语言的简单网页制作

    实验一 HTML语言的简单网页制作 一.实验目的: 1.掌握常用的HTML语言标记: 2.利用文本编辑器建立HTML文档,制作简单网页. 3.学习将其它格式的文档转换成HTML格式的文档 二.实验内容 ...

  4. 资源管理神器Clover

    开开心心地上班,这时你得打开我的电脑,点进D盘,打开某个项目;然后还得打开XX文档,还有.... 最后的最后,你的桌面便成了这个样子 每天你都得天打开多个文件夹,切换时找文件找的晕头转向而烦恼. 每天 ...

  5. std::hash

    std::hash 由于C++11引入了哈希表数据结构std::unordered_map和std::unordered_set,所以对于基本类型也实现了标准的哈希函数std::hash,标准并没有规 ...

  6. 为Linux的文件管理器创建“在此打开终端”菜单

    有些Linux的GUI文件管理器没有右键菜单"在此打开终端",或者有却不能自行指定某种终端. 因为文件夹也有其MIME类型(inode/directory),通过文件关联的方式,把 ...

  7. kafka生产者 消费者

    publisher.php <?php $rk = new RdKafka\Producer(); $rk->addBrokers("192.168.33.50"); ...

  8. php闭包作为函数参数

    <?php function test(Closure $call) { $a = 63; $b = 22; echo "hello"; echo $call($a,$b); ...

  9. C# 创建text文本并写入数据

    /// <summary> /// 创建TXT文本并往里面写入数据 /// </summary> /// <param name="FileName" ...

  10. git永久保存账号密码,免去git重复输入账号密码操作

    这是我刚刚遇到的问题,每次操git操作都要输入用户名和密码,网上百度了下搜到了方法解决了 方法一:(快捷简单) 直接在git bash 中执行命令:git config --global creden ...