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 ... 
随机推荐
- Redis 客户端 Jedis、lettuce 和 Redisson 对比
			Redis 支持多种语言的客户端,下面列举了部分 Redis 支持的客户端语言,大家可以通过官网查看 Redis 支持的客户端详情. C语言 C++ C# Java Python Node.js PH ... 
- 1-JAVA类、接口、抽象、多态
			类中全部成员变量用priviate修饰,用get获取,set设值 对于boolean类型的值,getter方法也一定要写成isXXX 的形式,而setXXX类型不变 this关键字的作用 当方法的局部 ... 
- day21 Pyhton学习 模块
			一.模块:就是一个包含了python定义和声明的文件,文件名是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1.使用python编写的代码(.py文件) 2.已被编译为共 ... 
- 【水】怎么在 HZOI 上水到更高的分
			前言 这些东西在联赛并用不了 预编译优化 40行优化 #define _CRT_SECURE_NO_WARNINGS #pragma GCC optimize(2) #pragma GCC optim ... 
- Spring Aop 详解一
			Aop 是一个编程思想,最初是一个理论,最后落地成了很多的技术实现. 我们写一个系统,都希望尽量少写点儿重复的东西.而很多时候呢,又不得不写一些重复的东西.比如访问某些方法的权限,执行某些方法性能的日 ... 
- docket镜像
			1.是什么 镜像是一种轻量级.可执行的独立软件包,用来打包软件运行环境和基于运行环境开发的软件,它包含运行某个软件所需的所有内容,包括代码.运行时.库.环境变量和配置文件. 1.1.什么是UnionF ... 
- linux(centos8):用fallocate快速生成大文件
			一,fallocate的用途? 1,用途 我们有时需要用大文件来测试下载速度, 有时需要用大文件来覆盖磁盘空间, 如果在网上搜索,很多文章讲的是使用dd等工具, 事实上linux系统已经内置了生成大文 ... 
- fish_redux使用详解---看完就会用!
			说句心里话,这篇文章,来来回回修改了很多次,如果认真看完这篇文章,还不会写fish_redux,请在评论里喷我. 前言 来学学难搞的fish_redux框架吧,这个框架,官方的文档真是一言难尽,比fl ... 
- Cypress系列(69)- route() 命令详解
			如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 管理控制整个网络请求 重要注意事项 ... 
- JavaWeb学习笔记(六)jsp
			第六章.jsp 1.什么是jsp jsp:java server pages,java的服务器页面 作用:代替Servlet回传HTML页面的数据 因为Servlet程序回传HTML页面的数据很繁琐, ... 
