Javascript Form How to - Show/hide RadioButton by CheckBox value

Question

We would like to know how to show/hide RadioButton by CheckBox value.

Answer


  <!-- w w  w .  j  av a2  s . c o  m-->
<html> 
<head> 
<style type="text/css"> 
#myGroup {visibility:hidden} 
</style> 
<script type="text/javascript"> 
function toggle(chkbox, group) { 
    var visSetting = (chkbox.checked) ? "visible" : "hidden"; 
    document.getElementById(group).style.visibility = visSetting; 
} 
function swap(radBtn, group) { 
    var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none"; 
    document.getElementById("modems").style.display = modemsVisSetting; 
} 
</script> 
</head> 
<body> 
    <form> 
        <input type="checkbox" name="monitor" onclick="toggle(this, 'myGroup')" />Monitor
        <span id="myGroup"><input type="radio" />15</span>
    </form> 
</body> 
</html>

The code above is rendered as follows: