JSFiddle - React, Tailwind, and code Playground
HTML
<input type="radio" name="Type" value="flat" id="flatRadio" onclick="checkType(this.value)" />Flat
<input type="radio" name="Type" value="salary" id="salaryRadio" onclick="checkType(this.value)" />Salaray
<br />
<div id="salaryDiv" class="toggle" 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" class="toggle" 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) {
var toggles = document.getElementsByClassName('toggle'),
inputs;
for (var i = 0, len = toggles.length; i < len; i++){
toggles[i].style.display = toggles[i].id == selectedType + 'Div' ? 'block' : 'none';
if (toggles[i].style.display == 'none') {
inputs = toggles[i].getElementsByTagName('input');
for (var c = 0, cLen = inputs.length; c < cLen; c++){
inputs[c].checked = false;
}
}
}
}