HTML: Radio Button

What is Radio Buttons

Radio Buttons is a group of buttons that only one can be activated.

The name came from the row of buttons on radio of cars around 1970s. These buttons, once pressed, it remains physically sunk, and pop up all other buttons.

Radio Buttons Example

Here is how to create a HTML radio button selection input.

Result:

Code

Only one can be selected (of the group that has the same name value name=val.).

<div>
<label><input type="radio" name="radioPets" value="dog">Dog</label>
<label><input type="radio" name="radioPets" value="cat" checked>Cat</label>
<label><input type="radio" name="radioPets" value="bird">Bird</label>
</div>

const radioPets = document.querySelectorAll('input[name="radioPets"]');
const showBox = document.getElementById("showBox");

const f_update = (() => {
  let selectedValue =
    document.querySelector('input[name="radioPets"]:checked').value;
  showBox.textContent = selectedValue;
});

Array.from(radioPets).forEach(
  ((x) => {
    x.addEventListener("input", f_update, false);
  }),
);

f_update();