Radio Tutorial

Step 1

The most basic radio.

We use the <input> element, and specify its type attribute to be radio.

There is no <radio> element.

Output

Step 2

Now let's attach a value to our radio.

We do this with the value attribute.

Output

Step 3

Now let's make that value visible.

We do this with the <label> element.


Output

Step 4

Now let's associate our label with our radio.

This way, clicking the label will check our radio.

We do this by adding a for attribute to our label...

That corresponds to the id attribute of our radio.


Output

Step 5

Let's add another radio!

As you can see, both radios can be selected with this markup...

This is not what we want!




Output

Step 6

We can fix that by grouping our radios together.

We do this by using the name attribute.

Each radio, within a group, must have the same name attribute.

This way, only one radio, within the group, can be checked.




Output

Step 7

Let's add a third radio!

We can choose which radio is 'pre-checked' with the checked attribute.






Output

Step 8

Now let's retrieve the value of the checked radio!

We do this by targeting the name attribute, and applying the :checked jQuery selector

If we don't use the :checked selector, we will be returned the value of the first radio.

This will select the (one) checked value from our group of radios.

$('.btn--rs1').on('click', function() {
  $('.radio5-value').text($('input[name="radio5"]:checked').val());
});

Output

Value of radio5 group:

And we're done!

I hope that you found this helpful.

Do let me know if there's anything you'd like added / changed!