Right way to use Radiobuttons

Question

I'm confused about which is the right way to use radiobuttons. Let's say i have a group of 3 radiobuttons : if all of them have the same id / name, it will work properly , only one can be checked :

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Second radiobutton</label>
<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">Third radiobutton</label>

The problem about this approach is i don't know how to identify which one is checked, because all of them have the same name / id.

The other way would use different names / ids :

<label for="input-rb1" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb1"><label for="input-rb1" class="radio-label">First radiobutton</label>
<label for="input-rb2" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb2"><label for="input-rb2" class="radio-label">Second radiobutton</label>
<label for="input-rb3" ></label><input class="radio-input" type="radio" id="input-rb1" name="input-rb3"><label for="input-rb3" class="radio-label">Third radiobutton</label>

This way i know how to use JQuery to know which is checked, but it will allow the user to select multiple radios, like it was checkboxes...

How to solve this puzzle ?

Thanks !

Possible duplicate of [jQuery get value of selected radio button](https://stackoverflow.com/questions/8622336/jquery-get-value-of-selected-radio-button) — Kurt, Nov 09 '17 at 18:15
Don't ever give more than one element an id. That's the point of an id. — zfrisch, Nov 09 '17 at 18:15

Rasitha Ariyarathna · Answer 1 · 2017-11-09T18:28:21.653

Only name of radio buttons should be same, id is an unique attribute in elements. You should use different ids and also you can use value attribute to assign values. Code is given below

<form action="">
  <input type="radio" id="1" name="gender" value="male"> Male<br>
  <input type="radio" id="2" name="gender" value="female"> Female<br>
</form>

You can use jQuery to get selected radio button value as follow

 $("input[type='radio']").on('change', function () {
         var selectedValue = $("input[name='gender']:checked").val();
         if (selectedValue) {
               alert(selectedValue);
           }
      });

zfrisch · Accepted Answer · 2017-11-09T18:37:37.413

An id is a keyword that can be used to find a specific element on a page.

<input type="radio" id="radio1">one
<input type="radio" id="radio2">two

    <input type="radio" id="radio1">one
    <input type="radio" id="radio2">two

You'll notice the above snippet allows you to select both radio buttons. There's nothing joining them together and the Browser can't assume they're connected.

A name is used to determine a value from an input field - or in the case of radio buttons - a single value from multiple input fields. It joins the radio buttons together to say "Hey, only allow one of you to be checked! That's the value we're going with!"

<input type="radio" name="radio_group">one
<input type="radio" name="radio_group">two

    <input type="radio" name="radio_group">one
    <input type="radio" name="radio_group">two

Notice that there are no ids in the above code. id and name are not interchangeable. They are completely separate attributes aimed to do two completely different things.

The other answers use JQuery and that's all well and good, but I think it's important to give a vanilla JS example as well.

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
    if (radio.checked) {
      //do whatever
    }
});

document.querySelectorAll("input[name='r_group']").forEach((radio) => {
  radio.addEventListener("change", () => {
    if (radio.checked) alert(radio.value);
  });
});

<input id="radio1" type="radio" name="r_group" value="one">one
<input id="radio2" type="radio" name="r_group" value="two">two
<input id="radio3" type="radio" name="r_group" value="three">three

score 0 · Answer 3 · answered Nov 09 '17 at 18:16

0

First, the values for "id" should be unique to each element. The name attribute can (and should) be the same for all elements in the group.

Then, to get the value of the checked radio use:

$('input[name=name_of_your_radiobutton]:checked').val();

answered Nov 09 '17 at 18:16

Kurt

1,868
3
21
42

I did not understand, the id should be unique but the name should be different ? – delphirules Nov 09 '17 at 18:17
The 'id' should be unique/different and the 'name' should be the same for all the radios in the group. – Kurt Nov 09 '17 at 18:18

score 0 · Answer 4 · answered Nov 09 '17 at 18:20

The second approach is wrong, name in radio buttons is used to group them in same class, only one of them can be selected.

Just use the following script-

$('input[name="input-rb1"]:checked').val();

Avoid using hyphen - in javascript instead use _ if possible

Right way to use Radiobuttons

4 Answers4