input标签中radio,checkbox和select的表单验证显示问题

 

 昨天学习了Javascript的一些用法，最后简单的验证了一些表单的信息。

随之实践的深入，发现表单中有一些标签如 <input type=" radio ">和<input type="checkbox  ">

这两个标签在使用时为多个一起出现功能为单选和多选。例如在DAY2实例表格中的性别和兴趣

这时我们所要验证表单返回的信息便不是固定的和唯一的，而因此，我们直接获取其组件的value这种方法便失效了。

那么我们应该如何去显示一个正确的选择信息呢？

首先我们先看一段代码

<tr>
    <td align="right" bordercolor="blue">性&nbsp;别</td>
    <td><input type="radio" name="sex" value="男"/>男 
        <input type="radio" name="sex" value="女"/>女 
        <input type="radio" name="sex"  value="其他"/>其他</td>
</tr>
<tr>
    <td align="right" bordercolor="blue">兴&nbsp;趣</td>
    <td><input type="checkbox" name="hobby" value="羽毛球 "/>羽毛球 
        <input type="checkbox" name="hobby" value="篮球"/>篮球 
        <input type="checkbox" name="hobby" value="足球"/>足球</td>
</tr>

我们首先定义了一个性别和兴趣的单选，多选功能。

 

对于radio的情况我们在js中编写这样一段代码

var sexdata = document.getElementsByName("sex");
var stuSex;
if(sexdata[0].checked ){
    stuSex = "男";
}else if(sexdata[1].checked){
    stuSex= "女";
} else{
    stuSex = "其他";
}

我们可以通过name=sex得到一组性别的数据。而 .checked 为检验是否被选中，若选中返回true 未选中返回false。

这种方法采用从上到下依次检验某一组件是否被选中，若选中赋值给变量，输出

这种分支语句适用于选项比较少的情况下，还可以采用循环语句

var sexdata = document.getElementsByName("sex");

var stusex;
	
for (var i = 0 ;i<sexdata.length;i++) {
		
if (sexdata[i].checked == 1) {

    stusex = sexdata[i].value;
}}

当i值小于数组长度时，判断第i个元素是否被选中，若选中便赋值给变量，输出

 

对于checkbox的情况

var hobbydata = document.getElementsByName("hobby");
var stuhobby="";	
for (var i= 0 ;i< hobbydata.length;i++) {
    if(hobbydata[i].checked == 1){
        if(stuhobby!=""){	
	    stuhobby=stuhobby+","+hobbydata[i].value;
        }else{
            stuhobby = hobbydata[i].value;
}}}

 我们根据name="hobby"得到兴趣的元素

因为checkbox为多选，我们不可能一次输出答案，所以定义变量为字符串类型

当i值小于数组长度时，判断第i个元素是否被选中，若选中则判断是否为第一个要输出的元素

若是第一个便赋便将value值给变量，若不是第一个元素则将 变量+，+value 赋值给变量

 

 

还有一个<select> <option>下拉选项。

<tr>
<td align="right" bordercolor="blue">专&nbsp;业</td>
<td><select name="data" >
<option>--请选择--</option>
<option>计算机科学与技术</option>
<option>有点意思</option>
</select></td>
</tr>

这个如果是按照正经方法应该也是跟上面一样。但是，谁让     +戏精本精呢

我悄摸摸的试了试这个方法

var stuDatas = document.getElementsByName("data");
var zydata = stuDatas[0].value;

然后我发现能正确显示。。。。。

哦，前提是这个stuDatas[0]是select的组件。