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 !

Answer 1

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);
           }
      });

Answer 2

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 

Answer 3

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();

Answer 4

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