JSFiddle - React, Tailwind, and code Playground
HTML
<label for='uno'><input type="radio" name="myRadios" id='uno' value="1" />1</label>
<label for='dos'><input type="radio" name="myRadios" id='dos' value="2" />2</label>
CSS
label {
display: block;
width: 200px;
padding: 8px;
}
JavaScript
/* radio check listener */
var changeHandler = (function initChangeHandler() {
var previousCheckedRadio = null;
function logInfo(info) {
if (!console || !console.log) return;
console.log(info);
}
function logPrevious(element) {
if (!element) return;
var message = element.value + ' was unchecked';
logInfo(message);
}
function logCurrent(element) {
if (!element) return;
var message = element.value + ' is checked';
logInfo(message);
}
var result = function (event) {
var currentCheckedRadio = event.target;
var name = currentCheckedRadio.name;
if (name !== 'myRadios') return;
logPrevious(previousCheckedRadio);
logCurrent(currentCheckedRadio);
previousCheckedRadio = currentCheckedRadio;
};
return result;
})();
document.addEventListener('change', changeHandler, false);