首页 > 代码库 > 简单计分表单
简单计分表单
之前在笔记里面有个很简单的调查表，各选项是输入的方式，可是现在那种计分表单很常见，就是比如一个问题有四个选项，选择不同选项有不同分值。
下面来看看从之前的简单调查表怎么演变为计分表单。（同样，主要侧重功能，所以表单依旧没有任何样式。）
一、将手动输入的选项改为单选
<div id="man" style="display: none;"> <h3>你平时不高兴的时候比较喜欢通过什么方式发泄？（单选）</h3> <input type="radio" name="radio2" id="q11_1" value="3" onclick="show_selected11_item_val(this)"/>跑步 <input type="radio" name="radio2" id="q11_2" value="4" onclick="show_selected11_item_val(this)"/>大吃 <input type="radio" name="radio2" id="q11_3" value="1" onclick="show_selected11_item_val(this)"/>看电影 <input type="radio" name="radio2" id="q11_4" value="5" onclick="show_selected11_item_val(this)"/>唱歌<br><br> <h3>你觉得哪个女明星最好看？（单选）</h3> <input type="radio" name="radio1" id="q12_2" value="4" onclick="show_selected12_item_val(this)"/>谢娜 <input type="radio" name="radio1" id="q12_3" value="5" onclick="show_selected12_item_val(this)"/>谢娜 <input type="radio" name="radio1" id="q12_4" value="1" onclick="show_selected12_item_val(this)"/>谢娜 <input type="radio" name="radio1" id="q12_5" value="3" onclick="show_selected12_item_val(this)"/>谢娜<br><br> </div> <div id="miss" style="display: none;"> <h3>以下食物你最喜欢吃什么？（单选）</h3> <input type="radio" name="radio1" id="q21_1" value="4" onclick="show_selected21_item_val(this)" />青菜 <input type="radio" name="radio1" id="q21_2" value="3" onclick="show_selected21_item_val(this)"/>萝卜 <input type="radio" name="radio1" id="q21_3" value="2" onclick="show_selected21_item_val(this)"/>花菜 <input type="radio" name="radio1" id="q21_4" value="1" onclick="show_selected21_item_val(this)"/>小麦 <input type="radio" name="radio1" id="q21_5" value="5" onclick="show_selected21_item_val(this)"/>西红柿<br><br> <h3>你觉得哪个男明星最好看？（单选）</h3> <input type="radio" name="radio2" id="q22_1" value="5" onclick="show_selected22_item_val(this)" />张杰 <input type="radio" name="radio2" id="q22_2" value="5" onclick="show_selected22_item_val(this)"/>张杰 <input type="radio" name="radio2" id="q22_3" value="5" onclick="show_selected22_item_val(this)"/>张杰 <input type="radio" name="radio2" id="q22_5" value="5" onclick="show_selected22_item_val(this)"/>张杰<br><br> </div><br>
二、为各选项添加点击事件
function show_selected11_item_val($item){ r11 = $item.value; }function show_selected12_item_val($item){ r12 = $item.value; }function show_selected21_item_val($item){ r21 = $item.value; }function show_selected22_item_val($item){ r22 = $item.value; }
三、修改getResult()函数
if(sex1 == true){ result = parseInt(r11) + parseInt(r12);}if(sex2 == true){ result = parseInt(r21) + parseInt(r22);}
return result;
当然，变量在之前就定义了， var r11 , r12 , r21 , r22 , result=0;
四、别的函数中不用取值的参数去掉即可，比如 age
效果图：
要点：关键在于，取得所选项的value（分值）。
<form method="post" action="#"> <input type="text" name="s1" placeholder="名字"> <h3>以下食物你最喜欢吃什么？（单选）</h3> <input type="radio" name="radio1" id="q1_1" value="4" onclick="show_selected1_item_val(this)" />青菜 <input type="radio" name="radio1" id="q1_2" value="3" onclick="show_selected1_item_val(this)"/>萝卜 <input type="radio" name="radio1" id="q1_3" value="2" onclick="show_selected1_item_val(this)"/>花菜 <input type="radio" name="radio1" id="q1_4" value="1" onclick="show_selected1_item_val(this)"/>小麦 <input type="radio" name="radio1" id="q1_5" value="5" onclick="show_selected1_item_val(this)"/>西红柿<br><br> <h3>你平时不高兴的时候比较喜欢通过什么方式发泄？（单选）</h3> <input type="radio" name="radio2" id="q2_1" value="3" onclick="show_selected2_item_val(this)"/>跑步 <input type="radio" name="radio2" id="q2_2" value="5" onclick="show_selected2_item_val(this)"/>大吃 <input type="radio" name="radio2" id="q2_3" value="1" onclick="show_selected2_item_val(this)"/>看电影 <input type="radio" name="radio2" id="q2_4" value="5" onclick="show_selected2_item_val(this)"/>唱歌<br><br> 你选择的是:<span id="show_content1"></span> <span id="show_content2"></span><br><br> <input type="submit" value="提交" onclick="result()"><input type="reset" value="重置"><br><br></form>
上面是一个表单，每个问题的选项都有点击事件：
function show_selected1_item_val($item){ document.getElementById("show_content1").innerHTML= $item.value; } function show_selected2_item_val($item){ document.getElementById("show_content2").innerHTML= $item.value; }
id为 show_content1 和 show_content2 是用来显示所选项的分值。主要就是 Result() 函数了：
function result(){ var r1 = document.getElementById("show_content1").innerHTML; var r2 = document.getElementById("show_content2").innerHTML; var r = parseInt(r1) + parseInt(r2); alert(r); }
这里用的是 document.getElementById("元素id").innerHTML :用javascript 的 document 对象查找到该div 获取它的HTML（假如该元素中包含子元素可用childNodes[Index]属性获取）
之后查资料看到有说 document.forms[] 也行，document.forms[] 返回一个集合，包含页面中所有表单form，document.forms[0]指页面中的第一个表单。
document.forms[0].s1.value 可以获取 页面中第一个表单中 name = s1 的值，所以：
function result(){ var r1 = document.forms[0].s1.value; var r2 = document.forms[0].radio1.value; var r = parseInt(r1) + parseInt(r2); alert(r);}
简单计分表单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。