CODEWITHSUNDEEP
javascriptjquerydom
venu gopal
venu gopal

Reputation: 47

how to check which radio button (dynamically) is checked?

I'm creating an online exam portal following is the code for displaying questions to candidates. I don't know how to handle the answers clicked by the candidates 

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

Radio buttons are dynamically created for 100 questions 4 each

Upvotes: 0

Views: 100

Answers (3)

Karthikeyan Vedi
Karthikeyan Vedi

Reputation: 1360

Try This -

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

Upvotes: 2

sandrooco
sandrooco

Reputation: 8756

Assuming you have a div with the questionWrapper class around every 4 boxes you could do something like this:

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

Upvotes: 0

mahyard
mahyard

Reputation: 1248

Consider a value for each option

then use this to understand which one is clicked:

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

you can rewrite your code like this:

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

Upvotes: 0

Related Questions