In Action

Using JQuery to Get Radio Button Input

Since JQuery has access to the entire DOM we can use it to get form input. in this example we will see how to determine which radio button has been selected.

 

This is the question stem for a multiple choice question. Babe Ruth hit ___ regular season home runs in his career?

704
712
714
724




JQuery Code

JQuery Code for our example

In this example we are getting the value of the checked property. Very simple and straight forward.

     $("#checkanswer").click(function(){
		 var selans = $(":checked").val();
    	 $("#feedback").text(selans);
      });	

HTML Code

HTML Code for our example

<form action="" method="post" enctype="multipart/form-data" 
               name="form1" id="form1">
 <fieldset>
 <p id="stem">
  This is the question stem for a multiple choice question. Babe Ruth hit ___ 
  regular season home runs in his career?
 </p>
 <p>
  <label>A<input type="radio" name="distractors" value="A" /></label>704<br />
  <label>B<input type="radio" name="distractors" value="B" /></label>712<br />
  <label>C<input type="radio" name="distractors" value="C" /></label>714<br />
  <label>D<input type="radio" name="distractors" value="D" /></label>724<br />
 </p>
 <p>
 <input name="hiddenField" type="hidden" value="C" id="ans" /><br />
 </p>
 </fieldset>
</form>
<p>
 <button id="checkanswer">Who is checked?</button>
</p>