Getting radio button values for multiple radio button sets

Question

I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.

I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).

I need this to work on a page with multiple sets of radio buttons

Here is the 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>

However, while I've been able to get a checked radio button value using this:

    jQuery('input[name=toeic]').change(function(){
      var invar = jQuery('input[name=toeic]:checked').val();
      alert(invar);
    });

The script is only effective within the first row of buttons clicked.

To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed (correct).

But, if in another row, button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be multiple sets of radio buttons.

Any help would be very much appreciated

`$(this).closest('form').find('input[name=toeic]:checked').val()` — Tushar, Oct 19 '16 at 03:24
I put this in RHS of the var invar assignment but it didn't work. — RoyS, Oct 19 '16 at 05:03

score 1 · Accepted Answer · answered Oct 19 '16 at 06:25

You could do something like this :

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

thanks for anticipating the question/answer format and putting it into the code. Nice work. I much appreciate your help Roy — RoyS, Oct 20 '16 at 01:33

score 0 · Answer 2 · edited May 23 '17 at 12:19

I think this is exactly what you need.

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

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

Credits to the owner of this answer @Peter J in this question How can I know which radio button is selected via jQuery?

This does not work for the situation I described where there are multiple sets of radio buttons on the page, like 10 sets each containing 4 buttons corresponding to 10 questions. I had, indeed, looked at the @Peter J answer. Thanks — RoyS, Oct 19 '16 at 04:47
Maybe I didn't express myself clearly. I have multiple sets of radio buttons enclosed with several forms on a page. I form > 1 set of radio buttons. Each form is associated with a question and the radio buttons are the alternative answers - a classic multiple choice questionnaire. The problem is that an initial radio button click anywhere on the page prevents values being accessed for clicks within forms elsewhere on the page, as described above, Any help would be very helpful. I'm really stymied by this problem. — RoyS, Oct 19 '16 at 05:21
I edited it, and I thought by doing that kind of approach helps you, but based on what you said, you are looking on a diff. answer. well, goodluck and hope you find the best answer :) — Royts, Oct 19 '16 at 05:57

Getting radio button values for multiple radio button sets

2 Answers2