请教一个单选按钮+cookie的问题？类似表决

Question

最近在做一个项目，类似表决，操作人需要在一个页面上对列表中的数据进行表决：同意抑或不同意。如下图所示。现在想实现的效果是这样：
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>

Answer 1

也没什么好说的了，你直接实施就是了
cookies参考
http://www.w3school.com.cn/js/js_cookies.asp

Answer 2

怎么不使用Ajax呢点一次，就记录一次
点完以后，提示用户确认投票，按钮“确认并完成投票”，显示出来。
点击“确认并完成投票”，出现分析结果，同时把此次投票的数据表单里面是否完成修改成true（默认false）,并记录完成时间，投票人id.....

Answer 3

考虑过采用ajax，主要是有可能操作人会频繁改动表决意向，这样的话，就会经常和服务器交互，影响效率，最后才想到能不能用cookie记录表决项，选择完后，一次性往后台写入数据。

Answer 4

万一使用人换电脑呢、cookie被清空了呢、360自动给你清除了呢？cookie记录就白存了。我认为这样的投票，我宁愿牺牲性能，也要保证万无一失。看这个界面，"专业组意见"投票以后，最后多半是给党组成员投票用的，没有几个人，用Ajax应该没有问题。

Answer 5

cookie记录比较麻烦可以增加onbeforeunload事件提醒用户是否离开页面就好了<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>

Answer 6

刚刚写了一下，考虑进cookie太蛋疼了，不想麻烦。    $(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+"%"});
            }
        });
    })

Answer 7

1.操作人必须对每一项进行选择：同意或是不同意，所有的都做出选择了之后才能点“提交”将数据提交到后台，否则会有提示“没有选择完之类的”。提交的时候判断一下2.因为是web应用，操作人就有可能误操作点了刷新或是关闭了页面，我现在的想法是，用户每点击一个“同意或不同意”，都记录到cookie中，这样就避免了刷新或者关闭窗口，之前的选择项丢失。现在每行我都写了一个radio单选按钮，命名用的是“Vote”+序号，所以说每一行的radio名字都是唯一的。cookie也是没有用的啊，游览器可以清除的，最好是每次选择一项就保存了。ajax的方式保存3.希望在点“提交”的时候能提醒操作人：同意的比例占了多少，比如100条数据，操作人点了25个同意，那提交的时候，提醒他“通过率为25%”
这个其实都是很好算的，做1的问题时，这个也一起做了

Answer 8

我丢个Lz需求的完整版吧
<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>

Answer 9

现在有问题了：
我把你这段代码function Check()
{
    if(ips[0].checked)
    {
        pass++;
        document.all.tongyi.innerText = pass //同意票数
    }
}加到我单选按钮radio的onclick事件中，用户每点一次，“tongyi”这个计数器就跟着变换数字。
现在有个问题，比如用户先选择radio1的“同意”，这时候，“tongyi”计数器+1没问题
然后用户把选项改成“不同意”，“tongyi”计数器不减1了，以上的情况只发生在最后一个选项变更的情况下。就是这个问题，请版主帮忙看下。下面是截图，能看着直观一点。

Answer 10

还是支持#4楼，把事情简单一点搞吧，要这么复杂干嘛。使用的人不多， 每个人两次点击的间隔时间也会至少也会有2到3秒。加多一个建议：有操作那一列，加多两个radio, “全部同意”、“全部不同意”， 这样， 人家选择起来， 就方便很多了。 只要把看得顺眼的或者不顺眼的挑出来就好了。