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 + "个选项。");
      }
    }

  

原文地址:https://www.cnblogs.com/f6056/p/11988518.html

时间: 2024-11-07 22:09:53

JS如何判断表单中用户选择哪个哪个选项?的相关文章

js中,表单中的选择框学习与使用总结

选择框脚本 选择框是通过<select>和<option>元素来创建.下面从对选择框的几个操作,来学习,总结Js中操作选择框的方法 一.选择选项 (1)只允许选择一项的选择框,访问选项中的最简单方式,就是使用选择框的selectIndex属性. selectedIndex 属性可设置或返回下拉列表中被选选项的索引号.设置selectedIndex会导致取消以前的所有选项并选择指定的那一项,而读取selectedIndex则只会返回选中项第一项的索引值.注意:若允许多重选择,则仅会返

使用angular.js获取form表单中的信息

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <script src="./node_modules/angular/angular.js"></script> </head> <body ng-app="s1

jQuery 判断表单中多个 input text 中至少有一个不为空

html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name[]"> 名称2:<input class="seasoning_name" type="text" name="seasoning_name[]"> 名称3:<input class="seasoning

js 向form表单中插入数据

var newElement = document.createElement("input"); var nowtime=year+""+month+day+hour+minute+second; newElement.setAttribute("name","nowtime"); newElement.setAttribute("value",nowtime); newElement.style.vis

表单中用户输入&quot;&amp;lt&quot;等转义字符,保存后数据库是原文保存的,但是查看的时候显示的是&quot;&lt;&quot;,如何是的&amp;lt;字符在网页原样显示出来。

其实方法也很简单,替换&为&就行了~ 演示如下 <?php $content="<!DOCTYPE html> <html> <body> <?php echo 我的第一段 PHP 脚本!; ?> </body> </html>"; $find="<"; $replace="&lt;"; $findTwo=">";

8.javascript获取表单中两个数字,并判断大小

获取表单数据的方式: 1.表单注意些id 2.使用document.getElementById("num").value 获取值 3.一定要注意现在得到是string类型,可以用alert(typeof(num))获取数据类型 4.使用parseInt函数将string类型转换成int类型,然后在判断 5.!!!!!!!!!!!!!注意要写.value,我又忘记了,又找bug了...... <!DOCTYPE html> <html> <head>

新随笔(二)用户体验:用户注册表单中的“年份”设计乱象

新随笔(二)用户体验:用户注册表单中的“年份”设计乱象 上午,我因为一些原因,想再注册一个新QQ号,当我注册时,我发现一个有趣的事儿,在用户注册页的表单选项“年份”选择中居然有”1895年“, 有意思,难道QQ觉得4亿用户还是太少,希望古人在那边也使用上QQ. (哈,谁能告诉我上图中显示的验证码是什么?看来QQ不光是防止机器人注册,连人类都挡在门外了.) 我先停下注册,看看其他类似网站是怎么做的.接下来我分别查看了开心.人人.朋友网.不查不知道,一查吓一跳,居然全都有类似的情况. why? 难道

判断用户选择的日期是否为星期一

在平台中如何判断用户选择的日期是否为星期一?实现代码如下图所示: 原文地址:http://bbs.delit.cn/thread-888-1-1.html 转载请注明出处: 撰写人:度量科技http://www.delit.cn

JS 端判断当前用户是否在某个SharePoint group (包含用户在AD组,然后将AD组加入到SP的组的情况)

本文讲述 JS 端如何判断当前用户是否在某个SharePoint group (包含用户在AD组,然后将AD组加入到SP的组的情况). 笔者曾经总结过JS端判断用户权限的三种方式: http://blog.csdn.net/abrahamcheng/article/details/17447479 但是实际需求中判断某个用户是否在哪个组是非常常见的,正如前面文章中所说,JS端判断当前用户是否在哪个组,只适用用于将用户直接加到SP group这种情况,针对用户在AD组,然后将AD组加入到SP的组的