JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myForm">
<label>
<input type="radio" name="gender" value="m" />
Male
</label>
<label>
<input type="radio" name="gender" value="f" />
<span>Female</span>
</label>
<label>
<input type="radio" name="gender" value="o" />
<span>Other</span>
</label>
<button>Submit!</button>
</form>
JavaScript
myForm.addEventListener("submit", function(e) {
e.preventDefault();
var genderCode = this["gender"].value;
var genderText = getText(this["gender"]);
alert([
"You are ",
genderText,
" (code ",
genderCode,
")"
].join(""));
});
function getText(radioList) {
for(var i = 0; i < radioList.length; i++) {
if(radioList[i].value === radioList.value) {
return radioList[i].parentNode.textContent.trim();
}
}
}