Question

我正在设置一个多项选择问卷，答案是通过标有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页面，但我找不到解决方案 - 问题似乎是多组的单选按钮。

非常感谢任何帮助

Answer 1

我认为这正是你所需要的。

＆＃13;

$('#1 input').on('change', function() {
       alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val()); 
    });
    $('#2 input').on('change', function() {
       alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val()); 
    });
    $('#3 input').on('change', function() {
       alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val()); 
    });
    $('#4 input').on('change', function() {
       alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val()); 
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="1">
     Question 1
     <br>
    <input type="radio" name="radioName" value="A" /> A <br />
    <input type="radio" name="radioName" value="B" /> B <br />
    <input type="radio" name="radioName" value="C" /> C <br />
    </form>
    <form id="2">
      Question 2
      <br>
    <input type="radio" name="radioName" value="A" /> A <br />
    <input type="radio" name="radioName" value="B" /> B <br />
    <input type="radio" name="radioName" value="C" /> C <br />
    </form>
    <form id="3">
      Question 3
      <br>
    <input type="radio" name="radioName" value="A" /> A <br />
    <input type="radio" name="radioName" value="B" /> B <br />
    <input type="radio" name="radioName" value="C" /> C <br />
    </form>
    <form id="4">
      Question 4
      <br>
    <input type="radio" name="radioName" value="A" /> A <br />
    <input type="radio" name="radioName" value="B" /> B <br />
    <input type="radio" name="radioName" value="C" /> C <br />
    </form>

＆＃13;

在此问题How can I know which radio button is selected via jQuery?

中对此答案的所有者@Peter J的信用

Answer 2

你可以这样做：

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

获取多个单选按钮组的单选按钮值

2 个答案: