jquery获取连续的单选钮,复选框。。值
开发考试系统时用于获取考生的答案进行判分
页面的代码(使用freemarker)
<div class="SJ_main"> <#--第一步:对单选题进行分页处理--> <#if (pageNum1>=1)> <#list 1..pageNum1 as pages1> <div class="page" id="page${pages1}"> <div class="page_main"> <div class="page_main_content_TX"> <p>一.单项选择题部分 本题型共${subNum1}题 共${pageNum1}页</p> </div> <div class="page_main_content"> <ul> <#list singleSubList as sl> <#if ((pages1-1)*5)<=sl_index&&sl_index<=(pages1*5-1)> <li> ${sl_index+1}. ${sl.singTitle}<font color="#999999">[${singleScoreList[sl_index]}分]</font>. <input type="hidden" name="singScore${sl_index+1}" value="${singleScoreList[sl_index]}"/> <input type="hidden" name="singAnswer${sl_index+1}" value="${sl.singAnswer}"/> <ul> <li> <input type="radio" name="singSub${sl_index+1}" value="A" onFocus="doSing(${sl_index+1})" /> A.${sl.singA} </li> <li> <input type="radio" name="singSub${sl_index+1}" value="B" onFocus="doSing(${sl_index+1})" /> B.${sl.singB} </li> <li> <input type="radio" name="singSub${sl_index+1}" value="C" onFocus="doSing(${sl_index+1})" /> C.${sl.singC} </li> <li> <input type="radio" name="singSub${sl_index+1}" value="D" onFocus="doSing(${sl_index+1})" /> D.${sl.singD} </li> <#if sl.singE?exists> <li> <input type="radio" name="singSub${sl_index+1}" value="E" onFocus="doSing(${sl_index+1})" /> E.${sl.singE} </li> </#if> </ul> </li> </#if> </#list> </ul> </div> </div> <#--以下为分页标签--> <div class="psge_yewei" style="color:#999999"> <span>${pages1}/${totalPage}</span> <span> <a onclick="javascript:displayPage(${pages1-1})">上一页</a> </span> <span> <a onclick="javascript:displayPage(${pages1+1})">下一页</a> </span> </div> </div> </#list> </#if> <#--第二步:对多选题进行分页处理--> <#if (pageNum2>=1)> <#list 1..pageNum2 as pages2> <div class="page" id="page${pages2+pageNum1}"> <div class="page_main"> <div class="page_main_content_TX"> <p>二.多项选择题部分 本题型共${subNum2}题 共${pageNum2}页</p> </div> <div class="page_main_content"> <ul> <#list moreSubList as ml> <#if ((pages2-1)*5)<=ml_index&&ml_index<=(pages2*5-1)> <li> ${subNum1+ml_index+1}. ${ml.moreTitle}<font color="#999999">[${moreScoreList[ml_index]}分]</font> <input type="hidden" name="moreScore${ml_index+1}" value="${moreScoreList[ml_index]}"/> <input type="hidden" name="moreAnswer${ml_index+1}" value="${ml.moreAnswer}"/> <ul> <li> <input type="checkbox" name="moreSub${ml_index+1}" value="A" onclick="doMore(${ml_index+1},${ml_index+1+subNum1})" /> A.${ml.moreA} </li> <li> <input type="checkbox" name="moreSub${ml_index+1}" value="B" onclick="doMore(${ml_index+1},${ml_index+1+subNum1})" /> B.${ml.moreB} </li> <li> <input type="checkbox" name="moreSub${ml_index+1}" value="C" onclick="doMore(${ml_index+1},${ml_index+1+subNum1})" /> C.${ml.moreC} </li> <li> <input type="checkbox" name="moreSub${ml_index+1}" value="D" onclick="doMore(${ml_index+1},${ml_index+1+subNum1})" /> D.${ml.moreD} </li> <#if ml.moreE?exists> <li> <input type="checkbox" name="moreSub${ml_index+1}" value="E" onclick="doMore(${ml_index+1},${ml_index+1+subNum1})" /> E.${ml.moreE} </li> </#if> </ul> </li> </#if> </#list> </ul> </div> </div> <#--以下为分页标签--> <div class="psge_yewei"> <span>${pages2+pageNum1}/${totalPage}</span> <span> <a onclick="javascript:displayPage(${pages2+pageNum1-1})">上一页</a> </span> <span> <a onclick="javascript:displayPage(${pages2+pageNum1+1})">下一页</a> </span> </div> </div> </#list> </#if> <#--第三步:对配比题进行分页处理--> <#if (pageNum3>=1)> <#list 1..pageNum3 as pages3> <div class="page" id="page${pages3+pageNum1+pageNum2}"> <div class="page_main"> <div class="page_main_content_TX"> <p style="font-family:宋体,Arial,sans-serif;">三. 配比选择题部分 本题型共${subNum3}题 共${pageNum3}页</p> </div> <div class="page_main_content"> <ul> <#list matchSubList1 as ml1> <#if ((pages3-1)*5)<=ml1_index&&ml1_index<=(pages3*5-1)> <li> ${ml1_index+1+subNum1+subNum2}. ${ml1.title} <font color="#999999">[${matchScoreList1[ml1_index]}分]</font>. <input type="hidden" name="matchScore1${ml1_index+1}" value="${matchScoreList1[ml1_index]}"/> <input type="hidden" name="matchAnswer1${ml1_index+1}" value="${ml1.answer}"/> <ul> <li> 1)${ml1.opa}</br> <select id="" name="match1${ml1_index+1}" onchange="doMatch1(${ml1_index+1},${ml1_index+1+subNum1+subNum2})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> <option value="E" style="color:#000000;">E</option> </select> </li> <li> 2)${ml1.opb}</br> <select id="" name="match1${ml1_index+1}" onchange="doMatch1(${ml1_index+1},${ml1_index+1+subNum1+subNum2})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> <option value="E" style="color:#000000;">E</option> </select> </li> <li> 3)${ml1.opc}</br> <select id="" name="match1${ml1_index+1}" onchange="doMatch1(${ml1_index+1},${ml1_index+1+subNum1+subNum2})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> <option value="E" style="color:#000000;">E</option> </select> </li> <li> 4)${ml1.opd}</br> <select id="" name="match1${ml1_index+1}" onchange="doMatch1(${ml1_index+1},${ml1_index+1+subNum1+subNum2})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> <option value="E" style="color:#000000;">E</option> </select> </li> <li> 5)${ml1.ope}</br> <select id="" name="match1${ml1_index+1}" onchange="doMatch1(${ml1_index+1},${ml1_index+1+subNum1+subNum2})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> <option value="E" style="color:#000000;">E</option> </select> </li> </ul> </li> </#if> </#list> </ul> </div> </div> <#--以下为分页标签--> <div class="psge_yewei" style="color:#999999"> <span>${pages3+pageNum1+pageNum2}/${totalPage}</span> <span> <a onclick="javascript:displayPage(${pages3+pageNum1+pageNum2-1})">上一页</a> </span> <span> <a onclick="javascript:displayPage(${pages3+pageNum1+pageNum2+1})">下一页</a> </span> </div> </div> </#list> </#if> <#--第四步:对比较题进行分页处理--> <#if (pageNum4>=1)> <#list 1..pageNum4 as pages4> <div class="page" id="page${pages4+pageNum1+pageNum2+pageNum3}"> <div class="page_main"> <div class="page_main_content_TX"> <p>四.比较选择题部分 本题型共${subNum4}题 共${pageNum4}页</p> </div> <div class="page_main_content"> <ul> <#list matchSubList2 as ml2> <#if ((pages4-1)*5)<=ml2_index&&ml2_index<=(pages4*5-1)> <li> ${ml2_index+1+subNum1+subNum2+subNum3}. ${ml2.title}<font color="#999999">[${matchScoreList2[ml2_index]}分]</font> <input type="hidden" name="matchScore2${ml2_index+1}" value="${matchScoreList2[ml2_index]}"/> <input type="hidden" name="matchAnswer2${ml2_index+1}" value="${ml2.answer}"/> <ul> <li> 1)${ml2.opa}</br> <select id="" name="match2${ml2_index+1}" onchange="doMatch2(${ml2_index+1},${ml2_index+1+subNum1+subNum2+subNum3})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> </select> </li> <li> 2)${ml2.opb}</br> <select id="" name="match2${ml2_index+1}" onchange="doMatch2(${ml2_index+1},${ml2_index+1+subNum1+subNum2+subNum3})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> </select> </li> <li> 3)${ml2.opc}</br> <select id="" name="match2${ml2_index+1}" onchange="doMatch2(${ml2_index+1},${ml2_index+1+subNum1+subNum2+subNum3})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> </select> </li> <li> 4)${ml2.opd}</br> <select id="" name="match2${ml2_index+1}" onchange="doMatch2(${ml2_index+1},${ml2_index+1+subNum1+subNum2+subNum3})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> </select> </li> <li> 5)${ml2.ope}</br> <select id="" name="match2${ml2_index+1}" onchange="doMatch2(${ml2_index+1},${ml2_index+1+subNum1+subNum2+subNum3})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="B" style="color:#000000;">B</option> <option value="C" style="color:#000000;">C</option> <option value="D" style="color:#000000;">D</option> </select> </li> </ul> </li> </#if> </#list> </ul> </div> </div> <div class="psge_yewei" style="color:#999999"> <span>${pages4+pageNum1+pageNum2+pageNum3}/${totalPage}</span> <span> <a onclick="javascript:displayPage(${pages4+pageNum1+pageNum2+pageNum3-1})">上一页</a> </span> <span> <a onclick="javascript:displayPage(${pages4+pageNum1+pageNum2+pageNum3+1})">下一页</a> </span> </div> </div> </#list> </#if> <#--第五步:对判断题进行分页处理--> <#if (pageNum5>=1)> <#list 1..pageNum5 as pages5> <div class="page" id="page${pages5+pageNum1+pageNum2+pageNum3+pageNum4}"> <div class="page_main"> <div class="page_main_content_TX"> <p>五.判断题<small>(A为true,C为false)</small> 共${subNum5}题 ${pageNum5}页</p> </div> <div class="page_main_content"> <ul> <#list judgeSubList as jl> <#if ((pages5-1)*5)<=jl_index&&jl_index<=(pages5*5-1)> <input type="hidden" name="judgeScore${jl_index+1}" value="${judgeScoreList[jl_index]}"/> <input type="hidden" name="judgeAnswer${jl_index+1}" value="${jl.answer}"/> <li> ${jl_index+1+subNum1+subNum2+subNum3+subNum4}. ${jl.title}<font color="#999999">[${judgeScoreList[jl_index]}分]</font></br> <select id="judge${jl_index+1}" name="judge${jl_index+1}" onchange="doJudge(${jl_index+1},${jl_index+1+subNum1+subNum2+subNum3+subNum4})" style="color:#cccccc;"> <option value="0" style="color:#cccccc;">请选择</option> <option value="A" style="color:#000000;">A</option> <option value="C" style="color:#000000;">C</option> </select> </li> </#if> </#list> </ul> </div> </div> <div class="psge_yewei" style="color:#999999"> <span>${pages5+pageNum1+pageNum2+pageNum3+pageNum4}/${totalPage}</span> <span> <a onclick="javascript:displayPage(${pages5+pageNum1+pageNum2+pageNum3+pageNum4-1})">上一页</a> </span> <span> <a onclick="javascript:displayPage(${pages5+pageNum1+pageNum2+pageNum3+pageNum4+1})">下一页</a> </span> </div> </div> </#list> </#if>
点击后通过js获取所有的答案:包括单选钮(单选题),复选框(多选题),下拉框(判断题,等)
js代码(只有关键代码):由于是多个值因此必须根据name来获得值
for (i = 1; i <= singSize; i++) { // 计算单选题 doAnswer = $("input[name=singSub" + i + "]:checked").val(); rightAnswer = $("input[name=singAnswer" + i + "]").val(); //alert("单选"+doAnswer+" "+rightAnswer); if (doAnswer == rightAnswer) { totalScore += new Number($("input[name = singScore" + i + "]") .val()); } } for (i = 1; i <= moreSize; i++) { // 计算多选题 doAnswer = ""; rightAnswer = ""; rightAnswer = $("input[name=moreAnswer" + i + "]").val(); $("input[name=moreSub" + i + "]:checked").each(function(i, obj) { doAnswer += $(obj).val(); }); //alert("多选"+doAnswer+" "+rightAnswer); if (doAnswer == rightAnswer) { totalScore += new Number($("input[name=moreScore" + i + "]") .val()); } } for (i = 1; i <= matchSize1; i++) { // 计算配比题 doAnswer = ""; rightAnswer = ""; rightAnswer = $("input[name=matchAnswer1" + i + "]").val(); var score = $("input[name = matchScore1" + i + "]").val(); //alert("正确答案 = " +rightAnswer + "分值 = "+score+"000"); $("select[name = match1" + i + "]").each(function(){ doAnswer += $(this).val(); }); //alert(doAnswer); if(doAnswer == rightAnswer){ totalScore+=new Number(score); } } for (i = 1; i <= matchSize2; i++) { // 计算比较题 doAnswer = ""; rightAnswer = ""; rightAnswer = $("input[name = matchAnswer2" + i + "]").val(); var score = $("input[name = matchScore2" + i + "]").val(); //alert("正确答案 = " +rightAnswer + "分值 = "+score+"111"); $("select[name = match2" + i + "]").each(function(){ doAnswer += $(this).val(); }); //alert(doAnswer); if(doAnswer == rightAnswer){ totalScore+=new Number(score); } } for (i = 1; i <= judgeSize; i++) { // 计算判断题 doAnswer = ""; rightAnswer = ""; doAnswer = $("#judge"+i+"").val(); alert(doAnswer); rightAnswer = $("input[name=judgeAnswer" + i + "]").val(); var score = $("input[name = judgeScore" + i + "]").val(); //alert("选择题正确答案是= "+rightAnswer+" 分值"+$("input[name = judgeScore" + i + "]").val()+ "实际答案 = "+$("#judge"+i+"").val()); if(doAnswer == rightAnswer){ //每一位进行比较是否相同 //alert("得分是 = "+totalScore); totalScore+=new Number(score); } }
希望多多交流,多多关注,共同成就梦想