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页面的数据很繁琐, ...