jQuery to Check Radio Input Group

Demonstrates how you would go about assigning specific values to radio buttons and retrieve them using the ":checked" selector.

by Matt Howey

HTML

<h4>Demonstrates how to assign values to radio inputs and retrieve them using the ":checked" selector.</h4>
<p>
Select each radio and click the Check Radios button...
</p>
610 => <input type="radio" name="group1" id="one" value="610">
212 => <input type="radio" name="group1" id="two" value="212" checked>
607 => <input type="radio" name="group1" id="three" value="607">
<p>
  <button id="checkRadios">Check Radios</button>  <button id="clear">clear</button>
</p>
<pre>Output:</pre>
<pre id="output">
  
</pre>
<p>
Note: if none are selected (only happens if you don't mark one as "checked", the return from the jquery val() call is going to be "undefined")
</p>

JavaScript

$("#checkRadios").click(function() {
  $("#output").prepend(
    $("input[name=group1]:checked").val() + '\n'
  );
});

$("#clear").click(function() {
	$("#output").html('');
})