昨天学习了Javascript的一些用法,最后简单的验证了一些表单的信息。
随之实践的深入,发现表单中有一些标签如 <input type=" radio ">和<input type="checkbox ">
这两个标签在使用时为多个一起出现功能为单选和多选。例如在DAY2实例表格中的性别和兴趣
这时我们所要验证表单返回的信息便不是固定的和唯一的,而因此,我们直接获取其组件的value这种方法便失效了。
那么我们应该如何去显示一个正确的选择信息呢?
首先我们先看一段代码
<tr>
<td align="right" bordercolor="blue">性 别</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">兴 趣</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">专 业</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的组件。