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("
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]:
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]:
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
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.