JSFiddle - React, Tailwind, and code Playground
HTML
<input type="radio" name="Type" value="flat" onclick="checkType(this.value)" onchange="clearRadios('flatDiv')" />Flat
<input type="radio" name="Type" value="salary" onclick="checkType(this.value)" onchange="clearRadios('salaryDiv')" />Salary
<br>
<div id="salaryDiv" style="display:none;">Choose an option:
<input type="radio" name="salaryType" value="1x" />1x
<input type="radio" name="salaryType" value="2x" />2x
<input type="radio" name="salaryType" value="3x" />3x</div>
<div id="flatDiv" style="display:none;">Choose an option:
<input type="radio" name="flatType" value="$25,000" />$25,000
<input type="radio" name="flatType" value="$50,000" />$50,000</div>
JavaScript
function checkType(selectedType) {
if (selectedType == 'flat') {
document.getElementById('flatDiv').style.display = 'block';
document.getElementById('salaryDiv').style.display = 'none';
} else {
document.getElementById('flatDiv').style.display = 'none';
document.getElementById('salaryDiv').style.display = 'block';
}
}
function clearRadios(id) {
var Radios = document.getElementById(id).getElementsByTagName('input');
for (var i = 0; i < Radios.length; i++) {
if (Radios[i].type == 'radio') {
Radios[i].checked = false;
}
}
}