Working with Radio Buttons using JQuery

Radio Buttons

Radio buttons play an important role in building user interfaces. The ability to choose between two or more values helps us create user interfaces that follow sensible logic. In order to demonstrate how jQuery handles radio buttons, let's refer to the following example.

Let's say we have a number of grouped radio buttons:
<input type = "radio" name = "answer" value = "Yes" /> Yes
<input type = "radio" name = "answer" value = "No"/> No

Notice that to create a group of radio buttons, all we have to do is assign a common name to each radio button in the set. In this case the name is "answer." This is what lets HTML know that the radio buttons share the same group.

Checking a Radio Button

By the end of the following statement, we will be left with Yes unchecked and No checked:
$("input[name=answer]").prop("checked", true)
Even though this function commanded to check all radio buttons in the set [name=answer], only one (the last one referring to No) is checked. Or at least that's what it seems.
In reality, first, Yes was checked. This is because we are selecting absolutely all radio buttons on the page with input[name=answer]. So, the property "checked" will be applied to all of them, one after another in a row.
But then the script checked No, and JavaScript automatically cleared the checked state of all other buttons in the same group. This happened so fast that you wouldn't see this actually happen in the browser.
Using prop on a set of grouped radio buttons produces an effect which is equivalent to having the user actually click on the radio button(s). In other words, you can't make more than one radio button (belonging to the same name-group) checked. JavaScript takes care of that for us.

Get the Value of the Currently Checked Radio Button Within a Group

The following HTML is an example of a radio button group with the option "Yellow" selected.

input type = "radio" name = "color" value = "Red" /> Red
    <input type = "radio" name = "color" value = "Yellow" checked /> Yellow
    <input type = "radio" name = "color" value = "Blue" /> Blue
To get the value of a currently checked radio button within a name-group, we need to know about two pseudo-selectors :radio and :checked. In combination these selectors can be used to arrive at selecting the object referring to the currently checked radio button element:

// Get the radio button object

    var radio = $("input:radio[name=color]:checked");   // get it as a jQuery object
    var value = radio.val();   // Get value of this radio button

    var namegroup = radio.attr("name");   // Get name-group of this radio button
What's interesting about this example is that the variable radio will be linked to the selected radio button element as a jQuery object. Therefore, from then on the variable radio is used as a jQuery object (we are allowed to call val(), attr() or any other jQuery method on it.)
In this particular case, we need to identify the value of the object that was returned. So we use the jQuery method val(). If we needed to grab the name-group of the selected radio button, we could use attr("name") on the returned object.
It's important to draw a distinction between jQuery objects and JavaScript objects when looking at your code. And knowing that jQuery objects are more powerful, because they contain all the extra methods provided by the jQuery library.
The reason I bring it up in this tutorial is because we must avoid thinking in terms of copy-and-paste solutions. In other words, I could have simply shown this example:
    var value = $("input:radio[name=color]:checked").val(); 
And then say, "This is how you get the value of a radio button." But the truth is that it is important to actually understand all the underlying principles at work here:
    1. Using [name=color] we singled out elements whose name attribute is color
    2. The knowledge of pseudo-selectors :radio and :checked
         (Pseudo selectors are selecors that start with a colon)
    3. $(selector) is a jQuery object which can access the entire jQuery method library
These facts alone can be applied to many other areas of writing jQuery code.

Share on Google Plus

About Khawar Akram

Efficient professional with approximately 3 years of experience in a medium size digital web agency and geotechnical engineering organization. Has profound knowledge of web and e-commerce application development. Expertise and experience in application deployments, analysis user requirements and client trainings and support. And proficient in adapt latest technologies, motivated and accomplished IT professional with resource management and programming skills and cooperative to peers and friendly to the starters.