JSFiddle - React, Tailwind, and code Playground

by brianarn

HTML

<label for="foo1">foo1</label><input type="radio" id="foo1" name="foo" checked>
<label for="foo2">foo2</label><input type="radio" id="foo2" name="foo">
<label for="foo3">foo3</label><input type="radio" id="foo3" name="foo">
<br>
<label for="bar1">bar1</label><input type="radio" id="bar1" name="bar">
<label for="bar2">bar2</label><input type="radio" id="bar2" name="bar" checked>
<label for="bar3">bar3</label><input type="radio" id="bar3" name="bar">
<br>
<label for="baz1">baz1</label><input type="radio" id="baz1" name="baz">
<label for="baz2">baz2</label><input type="radio" id="baz2" name="baz">
<label for="baz3">baz3</label><input type="radio" id="baz3" name="baz" checked>
<br>
<label for="buz1">buz1</label><input type="radio" id="buz1" name="buz">
<label for="buz2">buz2</label><input type="radio" id="buz2" name="buz">
<label for="buz3">buz3</label><input type="radio" id="buz3" name="buz">
<br>
<button id="check">Check checked properties</button>

CSS

label { display: inline-block; padding: 5px; width: 30px; }
input { margin-right: 15px; }

JavaScript

// This check is for IE only, so it's coded to IE8 standards (for QSA)
// No JS lib in use to ensure a clean env

var allRadios = document.querySelectorAll("input[type=radio]"),
    check = document.getElementById("check"),
    node, i, l;

function stopEvt() {
    // Prevent default actions
    var e = window.event;
    console.log("Node " + this.id + ": stopping event of type: " + e.type);
    e.returnValue = false;
    return false;
}

for (i = 0, l = allRadios.length; i < l; i++) {
    node = allRadios[i];
    node.onclick = stopEvt;
    node.onbeforeactivate = stopEvt;
}

check.onclick = function(){
    var node, i, l;
    for (i = 0, l = allRadios.length; i < l; i++) {
        node = allRadios[i];
        console.log("Node " + node.id + " checked: " + node.checked);
    }
};