JSFiddle - React, Tailwind, and code Playground

by steveukx

HTML

<div id="blah">
    <label><input name="group" value="1" type="radio" /> blah</label>
    <label><input name="group" value="2" type="radio" /> blah</label>
    <label><input name="group" value="3" type="radio" checked /> blah</label>
    <label><input name="group" value="4" type="radio" /> blah</label>
</div>

CSS

html { font: 10pt/1.5 "Lucida Sans Unicode", "Lucida Sans", Helvetica }
label { display: block }
output { font-weight: bold; }
code { font-size: 0.8rem; display: block; }

JavaScript

document.body.appendChild(document.createElement('p'))
    .innerHTML = "<code>input[checked]</code>" + 
        "There selected radio is number <output>" +
        (document.getElementById('blah')
         .querySelectorAll("input[checked]")[0].value) + "</output>";

document.body.appendChild(document.createElement('p'))
    .innerHTML = "<code>input:checked</code>" + 
        "There selected radio is number <output>" +
        (document.getElementById('blah')
         .querySelectorAll("input:checked")[0].value) + "</output>";