どのラジオボタンが（動的に）チェックされているかを確認する方法は？

Question

私はオンライン試験ポータルを作成しています。候補者に質問を表示するためのコードです。私は理解してこれを使用し、各オプション

の値を考えてみましょう

$("input[name='hello']").click(function(){ 
    alert("you clicked on"); 
}); 

ラジオボタンを動的に100個の質問4各

Answer 1

のために作成されている候補者がクリックした答えを処理する方法がわかりませんクリックされた1：

$("input[name='hello']:checked").val(); 

あなたは、このようにあなたのコードを書き換えることができます。

$("input[name='hello']").click(function(){ 
    var v=$("input[name='hello']:checked").val(); 
    alert("you clicked on"+v); 
}); 

Answer 2

はあなたがこのような何かを行うことができ、すべての4箱の周りquestionWrapperクラスを持つdiv要素を持っていると仮定すると：

var collection = $(".questionWrapper"); 
$.each(collection, function(i, $questionWrapper, function(){ 
    //Do this for all the questions 
    //Find the checked input (maybe use classes here...) and get its value 
    var clickedAnswer = $($questionWrapper).find("input:checked").val(); 
    //Do something with the clicked var, maybe push it to an array and then compare the array to the solution 
}); 

Answer 3

はこれを試してみてください -

$('input[data-type=choice]').change(function() { 
 
    var Question = $(this).attr('name'); 
 
    var Checked = $(this).attr('value'); 
 
    console.log('Selected Choice for ' + Question + ' is ' + Checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" value="Log all Answers" onclick="logAllAnswers()"> 
 
<input type="button" value="Clear Log" onclick="console.clear();"> 
 
<hr> 
 
<form> 
 
    <fieldset> 
 
    <legend>1. Select the answer for the first question.</legend> 
 
    <input type="radio" data-type="choice" name="Q1" value="1">Option 1 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q1" value="2">Option 2 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q1" value="3">Option 3 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q1" value="4">Option 4 
 
    </fieldset> 
 
    <fieldset> 
 
    <legend>2. Select the answer for the second question.</legend> 
 
    <input type="radio" data-type="choice" name="Q2" value="1">Option 1 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q2" value="2">Option 2 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q2" value="3">Option 3 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q2" value="4">Option 4 
 
    </fieldset> 
 
    <fieldset> 
 
    <legend>3. Select the answer for the third question.</legend> 
 
    <input type="radio" data-type="choice" name="Q3" value="1">Option 1 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q3" value="2">Option 2 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q3" value="3">Option 3 
 
    <br> 
 
    <input type="radio" data-type="choice" name="Q3" value="4">Option 4 
 
    </fieldset> 
 
</form> 
 

 

 

 
<script> 
 
    function logAllAnswers() { 
 
    $('input[data-type=choice]:checked').each(function() { 
 
     var Question = $(this).attr('name'); 
 
     var Checked = $(this).attr('value'); 
 
     console.log('Selected Choice for ' + Question + ' is ' + Checked); 
 
    }); 
 
    } 
 
</script>