请教一个单选按钮+cookie的问题？类似表决
最近在做一个项目，类似表决，操作人需要在一个页面上对列表中的数据进行表决：同意抑或不同意。如下图所示。
现在想实现的效果是这样：
1.操作人必须对每一项进行选择：同意或是不同意，所有的都做出选择了之后才能点“提交”将数据提交到后台，否则会有提示“没有选择完之类的。。。”。
2.因为是web应用，操作人就有可能误操作点了刷新或是关闭了页面，我现在的想法是，用户每点击一个“同意或不同意”，都记录到cookie中，这样就避免了刷新或者关闭窗口，之前的选择项丢失。现在每行我都写了一个radio单选按钮，命名用的是“Vote”+序号，所以说每一行的radio名字都是唯一的。
3.希望在点“提交”的时候能提醒操作人：同意的比例占了多少，比如100条数据，操作人点了25个同意，那提交的时候，提醒他“通过率为25%”
下面是代码片段：
<table width="98%" border="0" cellpadding="0" cellspacing="1" class="bg1" align="center">
<tr class="bg2">
<td width="4%" align="center"><b>序号</b></td>
<td width="5%" align="center"><b>姓名</b></td>
<td width="5%" align="center"><b>性别</b></td>
<td width="8%" align="center"><b>出生年月</b></td>
<td width="5%" align="center"><b>学历</b></td>
<td width="8%" align="center"><b>工作时间</b></td>
<td width="10%" align="center"><b>专业组意见</b></td>
<td width="13%" align="center"><b>操作</b></td>
</tr><br>
<tr><td align=center>250</td><td align=center>伍富才</td><td align=center>男</td><td align=center>1953.8</td><td align=center>大专</td><td align=center>1971.3</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote250 value=1 style=border:0>同意 <input type=radio name=Vote250 value=0 style=border:0>不同意</td></tr><tr><td align=center>251</td><td align=center>冉秋鸿</td><td align=center>女</td><td align=center>1972.11</td><td align=center>本科</td><td align=center>1990.8</td><td align=center>基本同意推荐</td><td align=center><input type=radio name=Vote251 value=1 style=border:0>同意 <input type=radio name=Vote251 value=0 style=border:0>不同意</td></tr><tr><td align=center>252</td><td align=center>文锐</td><td align=center>男</td><td align=center>1969.9</td><td align=center>本科</td><td align=center>1988.2</td><td align=center>不同意推荐</td><td align=center><input type=radio name=Vote252 value=1 style=border:0>同意 <input type=radio name=Vote252 value=0 style=border:0>不同意</td></tr><tr><td align=center>253</td><td align=center>蒲昌权</td><td align=center>男</td><td align=center>1969.1</td><td align=center>本科</td><td align=center>1991.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote253 value=1 style=border:0>同意 <input type=radio name=Vote253 value=0 style=border:0>不同意</td></tr><tr><td align=center>254</td><td align=center>刘春</td><td align=center>男</td><td align=center>1974.2</td><td align=center>本科</td><td align=center>1994.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote254 value=1 style=border:0>同意 <input type=radio name=Vote254 value=0 style=border:0>不同意</td></tr><tr><td align=center>255</td><td align=center>熊艳</td><td align=center>女</td><td align=center>1969.11</td><td align=center>硕士</td><td align=center>1991.8</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote255 value=1 style=border:0>同意 <input type=radio name=Vote255 value=0 style=border:0>不同意</td></tr><tr><td align=center>256</td><td align=center>邱祥万</td><td align=center>男</td><td align=center>1975.10</td><td align=center>本科</td><td align=center>1999.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote256 value=1 style=border:0>同意 <input type=radio name=Vote256 value=0 style=border:0>不同意</td></tr><tr><td align=center>277</td><td align=center>张能</td><td align=center>男</td><td align=center>1977.6</td><td align=center>本科</td><td align=center>2000.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote277 value=1 style=border:0>同意 <input type=radio name=Vote277 value=0 style=border:0>不同意</td></tr></table>
<table width="98%" border="0" cellpadding="0" cellspacing="1" class="bg1" align="center" id="tb">
<tr class="bg2">
<td width="4%" align="center"><b>序号</b></td>
<td width="5%" align="center"><b>姓名</b></td>
<td width="5%" align="center"><b>性别</b></td>
<td width="8%" align="center"><b>出生年月</b></td>
<td width="5%" align="center"><b>学历</b></td>
<td width="8%" align="center"><b>工作时间</b></td>
<td width="10%" align="center"><b>专业组意见</b></td>
<td width="13%" align="center"><b>操作</b></td>
</tr>
<tr><td align=center>250</td><td align=center>伍富才</td><td align=center>男</td><td align=center>1953.8</td><td align=center>大专</td><td align=center>1971.3</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote250 value=1 style=border:0>同意 <input type=radio name=Vote250 value=0 style=border:0>不同意</td></tr><tr><td align=center>251</td><td align=center>冉秋鸿</td><td align=center>女</td><td align=center>1972.11</td><td align=center>本科</td><td align=center>1990.8</td><td align=center>基本同意推荐</td><td align=center><input type=radio name=Vote251 value=1 style=border:0>同意 <input type=radio name=Vote251 value=0 style=border:0>不同意</td></tr><tr><td align=center>252</td><td align=center>文锐</td><td align=center>男</td><td align=center>1969.9</td><td align=center>本科</td><td align=center>1988.2</td><td align=center>不同意推荐</td><td align=center><input type=radio name=Vote252 value=1 style=border:0>同意 <input type=radio name=Vote252 value=0 style=border:0>不同意</td></tr><tr><td align=center>253</td><td align=center>蒲昌权</td><td align=center>男</td><td align=center>1969.1</td><td align=center>本科</td><td align=center>1991.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote253 value=1 style=border:0>同意 <input type=radio name=Vote253 value=0 style=border:0>不同意</td></tr><tr><td align=center>254</td><td align=center>刘春</td><td align=center>男</td><td align=center>1974.2</td><td align=center>本科</td><td align=center>1994.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote254 value=1 style=border:0>同意 <input type=radio name=Vote254 value=0 style=border:0>不同意</td></tr><tr><td align=center>255</td><td align=center>熊艳</td><td align=center>女</td><td align=center>1969.11</td><td align=center>硕士</td><td align=center>1991.8</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote255 value=1 style=border:0>同意 <input type=radio name=Vote255 value=0 style=border:0>不同意</td></tr><tr><td align=center>256</td><td align=center>邱祥万</td><td align=center>男</td><td align=center>1975.10</td><td align=center>本科</td><td align=center>1999.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote256 value=1 style=border:0>同意 <input type=radio name=Vote256 value=0 style=border:0>不同意</td></tr><tr><td align=center>277</td><td align=center>张能</td><td align=center>男</td><td align=center>1977.6</td><td align=center>本科</td><td align=center>2000.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote277 value=1 style=border:0>同意 <input type=radio name=Vote277 value=0 style=border:0>不同意</td></tr></table>
<input type="button" value="提交" onclick="check()" />
<script type="text/javascript">
function check() {
var tb = document.getElementById('tb'), total = tb.rows.length - 1, pass = 0, ips;
for (var i = 1; i <= total; i++) {
ips = tb.rows[i].getElementsByTagName('input');
if (!ips[0].checked &&!ips[1].checked) { alert('没有选择完！'); ips[0].focus(); return false; }
if(ips[0].checked)pass++;
}
alert('通过率为：' + (pass * 100 / total) + '%');
}
window.onbeforeunload = function (e) {
e = e
[解决办法]
window.event;
e.returnValue = '是否离开页面！';
}
</script>
$(function(){
var i_all=$("input:radio").size();
$("input:radio").click(function(){
if($("input:radio:checked").size()*2==i_all){
var i=$("input:radio[value=1]:checked").size();
var p=Math.floor(i/i_all*200);
$("input:submit").attr({disabled:false,value:"提交",title:"同意率:"+p+"%"});
}
});
})<table width="98%" border="0" cellpadding="0" cellspacing="1" class="bg1" align="center" id="tb">
<tr class="bg2">
<td width="4%" align="center"><b>序号</b></td>
<td width="5%" align="center"><b>姓名</b></td>
<td width="5%" align="center"><b>性别</b></td>
<td width="8%" align="center"><b>出生年月</b></td>
<td width="5%" align="center"><b>学历</b></td>
<td width="8%" align="center"><b>工作时间</b></td>
<td width="10%" align="center"><b>专业组意见</b></td>
<td width="13%" align="center"><b>操作</b></td>
</tr>
<tr><td align=center>250</td><td align=center>伍富才</td><td align=center>男</td><td align=center>1953.8</td><td align=center>大专</td><td align=center>1971.3</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote250 value=1 style=border:0>同意 <input type=radio name=Vote250 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>251</td><td align=center>冉秋鸿</td><td align=center>女</td><td align=center>1972.11</td><td align=center>本科</td><td align=center>1990.8</td><td align=center>基本同意推荐</td><td align=center><input type=radio name=Vote251 value=1 style=border:0>同意 <input type=radio name=Vote251 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>252</td><td align=center>文锐</td><td align=center>男</td><td align=center>1969.9</td><td align=center>本科</td><td align=center>1988.2</td><td align=center>不同意推荐</td><td align=center><input type=radio name=Vote252 value=1 style=border:0>同意 <input type=radio name=Vote252 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>253</td><td align=center>蒲昌权</td><td align=center>男</td><td align=center>1969.1</td><td align=center>本科</td><td align=center>1991.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote253 value=1 style=border:0>同意 <input type=radio name=Vote253 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>254</td><td align=center>刘春</td><td align=center>男</td><td align=center>1974.2</td><td align=center>本科</td><td align=center>1994.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote254 value=1 style=border:0>同意 <input type=radio name=Vote254 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>255</td><td align=center>熊艳</td><td align=center>女</td><td align=center>1969.11</td><td align=center>硕士</td><td align=center>1991.8</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote255 value=1 style=border:0>同意 <input type=radio name=Vote255 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>256</td><td align=center>邱祥万</td><td align=center>男</td><td align=center>1975.10</td><td align=center>本科</td><td align=center>1999.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote256 value=1 style=border:0>同意 <input type=radio name=Vote256 value=0 style=border:0>不同意</td></tr>
<tr><td align=center>277</td><td align=center>张能</td><td align=center>男</td><td align=center>1977.6</td><td align=center>本科</td><td align=center>2000.7</td><td align=center>同意推荐</td><td align=center><input type=radio name=Vote277 value=1 style=border:0>同意 <input type=radio name=Vote277 value=0 style=border:0>不同意</td></tr>
</table>
<input type="button" onclick="vote.submit()" value="提交" />
<script type="text/javascript">
function setCookie(name,value) {
var date=new Date();
var ms=1000*60*60*24;
date.setTime(date.getTime()+ms);
var str = name+"="+escape(value);
str+="; expires="+date.toGMTString();
str+="; path=/";
str+="; domain="+document.domain;
str+="; true";
document.cookie=str;
};
function getCookie(name){
var cookieArray=document.cookie.split("; ");
var cookie=new Object();
for(var i=0;i<cookieArray.length;i++){
var arr=cookieArray[i].split("=");
if(arr[0]==name){
if(unescape(arr[1])=="undefined"){
return "";
}else{
return unescape(arr[1]);
}
}
};
return "";
};
function Vote(){
this.list=document.getElementById("tb").getElementsByTagName("input");
this.size=this.list.length;
this.cache={};
};
Vote.prototype={
init:function(){
//假定前提:table中就只存在radio,每个人都只有两个选项
for(var i=0;i<this.size;i++){
var _this=this.list[i];
if(_this.value==getCookie(_this.getAttribute("name"))){
_this.checked=true;
this.cache[_this.getAttribute("name")]=_this.value;
};
var _self=this;
_this.onclick=function(){
_self.set(this.getAttribute("name"),this.value);
}
}
}
,set:function(name,value){
this.cache[name]=value;
setCookie(name,value);
}
,submit:function(){
var str='';
var count=0;
for(var i in this.cache){
if(this.cache.hasOwnProperty(i)){
str+=str.length>0?'&':'';
str+=i+'='+this.cache[i];
if(this.cache[i]==1){
count++
}
}
};
if(str.length==0
[解决办法]
str.split('&').length<(this.size/2)){
alert('尚未表决完！')
}else{
alert('通过率：'+(count*2/this.size)*100+'%\n提交参数：'+str)
}
}
};
var vote=new Vote();
vote.init();
</script>