javascript – 获取多个单选按钮集的单选按钮值

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 获取多个单选按钮集的单选按钮值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3160字，纯文字阅读大概需要5分钟。

内容图文

我正在设置一个多项选择问卷,答案是通过标有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>

内容总结

以上是互联网集市为您收集整理的javascript – 获取多个单选按钮集的单选按钮值全部内容，希望文章能够帮你解决javascript – 获取多个单选按钮集的单选按钮值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端