Получение значения радиокнопки кнопки многократных радиоприемников

Question

Я настраиваю множественный опросник выбора с ответами орудуя радиокнопки маркированы A, B, C и D.

Я хочу, чтобы определить ответ на каждый вопрос, получив идентификатор формы и значение кнопки щелчка, так что, например, ответ с использованием первого набора переключателей может быть 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

Вы могли бы сделать что-то вроде этого:

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

Answer 2

Я думаю, что это именно то, что вам нужно.

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

Кредиты владельца этого ответа @Peter J в этом вопросе How can I know which radio button is selected via jQuery?