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 ...
随机推荐
- Javascript判断数据类型的五种方式及其特殊性
Javascript判断数据类型的五种方式及区别 @ 目录 typeof instanceof Object.prototype.toString isArray iisNaN ----------- ...
- java 画 哆啦A梦
package Demo;import javax.imageio.ImageIO;import java.awt.*;import java.awt.image.BufferedImage;impo ...
- 【找规律】ARC 066D Xor Sum AtCoder - 2272
题目大意 给出一个整数\(n\),已知\(0\le u,v\le n\),求满足\(a\ xor\ b=u\)且\(a+b=v\)的\(a.b\)对数 样例1输入 3 样例1输出 5 /* u=0,v ...
- 运行shell文件时提示/bin/bash^M: bad interpreter: 没有那个文件
查看脚本文件是dos格式还是unix格式的几种办法.(1)cat -A filename 从显示结果可以判断,dos格式的文件行尾为^M$,unix格式的文件行尾为$:(2)od -t x1 file ...
- CentOS7下RabbitMQ服务安装配置 (亲测有效)
erlang 21.3 rabbitmq-server 3.7.14 下载地址 链接: https://pan.baidu.com/s/1g_T1Q_6zpyO3AepS0ZPgYQ 提取码: abq ...
- 第十七章 nginx动静分离和rewrite重写
一.动静分离 动静分离,通过中间件将动静分离和静态请求进行分离:通过中间件将动态请求和静态请求分离,可以减少不必要的请求消耗,同时能减少请求的延时.通过中间件将动态请求和静态请求分离,逻辑图如下: 1 ...
- OpenCV开发笔记(七十二):红胖子8分钟带你使用opencv+dnn+tensorFlow识别物体
前言 级联分类器的效果并不是很好,准确度相对深度学习较低,本章使用opencv通过tensorflow深度学习,检测已有模型的分类. Demo 可以猜测,1其实是人,18序号类是狗 ...
- Bitmap缩放(一)
使用矩阵进行压缩,通过缩放图片尺寸,来达到压缩图片的效果,和采样率的原理一样.先用位图的option将位图压缩一半,再用matrix缩放0.3f public class MainActivity e ...
- Zookeeper(2)---节点属性、监听和权限
之前通过客户端连接之后我们已经知道了zk相关的很多命令(Zookeeper(1)---初识). 节点属性: 现在我们就通过stat指令来看看节点都有哪些属性,或者使用get 指令和-s参数来查看节点数 ...
- Spark性能调优的方法
原则一:避免创建重复的RDD 通常来说,我们在开发一个Spark作业时,首先是基于某个数据源(比如Hive表或HDFS文件)创建一个初始的RDD:接着对这个RDD执行某个算子操作,然后得到下一个RDD ...