Question

我对这个脚本有两个问题。 1）我希望隐形问题缩小到高度0（这样问题就不会上下跳动）。 2）当问题变为'隐形'时，我希望子弹组* un *检查。

为了使事情复杂化，我无法使用jQuery或其他库，必须使用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>

Answer 1

尝试设置显示属性而不是可见性，clearRadioButtonValue将重置单选按钮组值以取消选中

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;}
}

JavaScript / CSS Collapse Paragraphs＆amp;取消选择单选按钮

1 个答案: