HTML: Radio Button

By Xah Lee. Date: . Last updated: .

Here's how to create a HTML radio button selection input.

Result:

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

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

<p>Result:
<span id="showBox77087"></span>
</p>
{
const radioPets28642 = document. querySelectorAll ('input[name="radioPets28642"]');
const showBox77087 = document. getElementById ('showBox77087');

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

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

f_update();
}

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials