我正在设置一个多项选择问卷,答案是通过标有A,B,C和D的单选按钮处理.
我想通过获取表单ID和单击的按钮值来确定每个问题的答案,例如,使用第一组单选按钮的响应可能是1B而第二个,2D等等(表单ID)脚本已经启动并运行).
这是HTML:
<form class="toeic_pages" id="1"> <label class="item1"> <input type="radio" value="A" name="toeic"/> <div class="radio-image"></div> </label> <label class="item2"> <input type="radio" value="B" name="toeic"/> <div class="radio-image"></div> </label> <label class="item3"> <input type="radio" value="C" name="toeic"/> <div class="radio-image"></div> </label> <label class="item4"> <input type="radio" value="D" name="toeic"/> <div class="radio-image"></div> </label> </form> ... <form class="toeic_pages" id="2"> <label class="item1"> <input type="radio" value="A" name="toeic"/> <div class="radio-image"></div> </label> <label class="item2"> <input type="radio" value="B" name="toeic"/> <div class="radio-image"></div> </label> <label class="item3"> <input type="radio" value="C" name="toeic"/> <div class="radio-image"></div> </label> <label class="item4"> <input type="radio" value="D" name="toeic"/> <div class="radio-image"></div> </label> </form>
但是,虽然我已经能够使用以下方法获得已检查的单选按钮值:
jQuery('input[name=toeic]').change(function(){ var invar = jQuery('input[name=toeic]:checked').val(); alert(invar); });
该脚本仅在单击的第一行按钮内有效.
为了说明,如果在要访问的第一行按钮中,单击按钮B,则显示B(正确).
但是,如果在另一行中,单击按钮C,则显示B(不正确)..并且对于所有后续按钮单击继续显示B.我已经检查了SO页面,但我找不到解决方案 – 问题似乎是多组单选按钮.
任何帮助将非常感谢
解决方法
你可以这样做:
$(document).ready(function() { $("#finish").click(function() { var answersList = []; //Loop over all questoins $(".toeic_pages").each(function() { var questionId = $(this).attr("id"); var answer = $("input[name='toeic']:checked",$(this)).val(); //if Answer isnt provided do not update the answersList if (answer !== undefined) { answersList.push({ question: questionId,answer: answer }); } }); console.log(answersList); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="toeic_pages" id="1"> <label class="item1"> <input type="radio" value="A" name="toeic" /> <div class="radio-image"></div> </label> <label class="item2"> <input type="radio" value="B" name="toeic" /> <div class="radio-image"></div> </label> <label class="item3"> <input type="radio" value="C" name="toeic" /> <div class="radio-image"></div> </label> <label class="item4"> <input type="radio" value="D" name="toeic" /> <div class="radio-image"></div> </label> </form> ... <form class="toeic_pages" id="2"> <label class="item1"> <input type="radio" value="A" name="toeic" /> <div class="radio-image"></div> </label> <label class="item2"> <input type="radio" value="B" name="toeic" /> <div class="radio-image"></div> </label> <label class="item3"> <input type="radio" value="C" name="toeic" /> <div class="radio-image"></div> </label> <label class="item4"> <input type="radio" value="D" name="toeic" /> <div class="radio-image"></div> </label> </form> <button id="finish">Get Answers</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。