jQuery: How to Locate the Selected Radio Button out of a Group of Radio Buttons CodeUnit 13 MAY 2011

If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript!

Radio buttons are pretty awesome when you need to ensure that a user has picked ONE of the given options presented to them, and using jQuery, it turns out to be a pretty simple affair to determine and manipulate exactly which radio button is currently selected from the group.

An example:

/* Your HTML...
<input type="radio" name="sample" value="1" />
<input type="radio" name="sample" value="2" checked="checked" />
<input type="radio" name="sample" value="3" />

    // displays the selected radio button in an alert box

The above will correctly select the selected radio button Sample 2 and will alert its value of… well 2.

The ‘input[name=sample]:checked’ jQuery selector is guaranteed to return us a result and of course, this result can be manipulated in which ever way you would like, as with any other jQuery selected DOM object.


Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  •  Thanks Dear Good post…

  • Ursula

    Hi Craig,

    If I wanted to code a radio group that consisted of  4 selections in the group where the user would select one to evaluate the answer would I code it as per above i.e the group consists of : Add, Subtract, Multiply and Divide.  Im not sure if i am coding is correctly could you possibly help me