Home/ Questions/Q 6814443
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:41:22+00:00

There are two problems I am having with this script. 1) I want the

  • 0

There are two problems I am having with this script. 1) I want the invisble question to shrink to height 0 (so that the questions are not jumping up and down). 2) When the question becomes ‘invisible’, I want the bullet group to be *un*checked.

To complicate things a little, I cannot use jQuery or other libraries, it must be done with JavaScript.

<style type="text/css">
    #Q2{visibility:hidden;}
    #Q3{visibility:hidden;}
</style>
<script type="text/javascript">
function yes(){
    document.getElementById('group2').style.visibility = "visible";
    document.getElementById('group3').style.visibility = "collapse";
}
function no(){
    document.getElementById('group2').style.visibility = "collapse";
    document.getElementById('group3').style.visibility = "visible";
} 
</script> 

</head>
<body>

<form name="test">
    <p>Yes or No?
    <input type="radio" name="buy" value="yes" onClick="yes()" />Yes 
    <input type="radio" name="buy" value="no" onClick="no()"/> No

    <p id="group2">Yes or No?
    <input type="radio" name="go" value="yes" />Yes 
    <input type="radio" name="go" value="no" /> No</p>

    <p id="group3">Yes or No?
    <input type="radio" name="stop" value="yes" />Yes 
    <input type="radio" name="stop" value="no"  /> No</p>   
</form>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try setting display property instead of visibility, the clearRadioButtonValue will take of resetting the radio button group value to unchecked

    function yes(){
  document.getElementById('group2').style.display = "";
  document.getElementById('group3').style.display = "none";
  clearRadioButtonValue();
}
function no(){
  document.getElementById('group2').style.display = "none";
  document.getElementById('group3').style.display = "";
  clearRadioButtonValue();
}
function clearRadioButtonValue()
{
  var group2 = document.forms.test.go;
  var group3 = document.forms.test.stop;   
  for(var i=0;i<group2.length;i++){group2[i].checked=false;}
  for(var i=0;i<group3.length;i++){group3[i].checked=false;}
}
    • 0