标签:highlight htm onsubmit efault get function length onclick case
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 + "个选项。");
}
}
标签:highlight htm onsubmit efault get function length onclick case
原文地址:https://www.cnblogs.com/f6056/p/11988518.html