Question

我的目标是要使嵌套的复选框在一个字段集中折叠/展开。我一直在努力尝试在ie8中使用适合javascript和html的选项（基础架构的局限性，我无法更改）。我已经花了5个小时在此上，我不知道自己哪里出了问题。我对HTML也比较新，所以请放轻松。

理想情况下，我会看到心血管，并且选择1和选择2崩溃了，我可以分别单击它们以打开复选框。

请参阅示例：

我尝试查看手风琴和树状视图。

<html>

<head>


<script language="Javascript">
 </script>

<style>
body {background-color: white;}
fieldset {
  font-size:12px;
  padding:10px;
  width:320px;
  line-height:1.8;
  height=150px;
  vertical-align: top;
}



legend {
    font-weight:bold;
    background: #e6f9ff ;
    color:black;
    font-size: 16px
    font-faily: Arial
    margin: 0;
    padding: 0;
    text-align:left;
    float: left;
    width:100%;

}

h2   {
    border: 2px solid #e6f9ff;
    color:black;
}




</style>


</head>

<form>


<h2><b>Select comorbidities to automatically update the diagnosis list:</b></h2>



<fieldset>

  <legend>Neurological</legend>
  <div>
    <input type="checkbox" id="Severe Brain Conditions" name="Neurological" value="Severe Brain Conditions" onClick='togglebtn();'></input>
    <label for="Severe Brain Conditions">Severe Brain Conditions</label>
  </div>
  <div>
    <input type="checkbox" id="Dementia" name="Neurological" value="Dementia" onClick='togglebtn();'></input>
    <label for="Dementia">Dementia</label>
  </div>
</fieldset>



<fieldset>
  <legend>Cardiovascular</legend>
  <div>
    <input type="checkbox" id="End Stage Heart Failure" name="Cardiovascular" value="End Stage Heart Failure" onClick='togglebtn();'></input>
    <label for="End Stage Heart Failure">End Stage Heart Failure</label>
  </div>
  <div>
    <input type="checkbox" id="Complication of Cardiac/Vascular Device/Implant/Graft" name="Cardiovascular" value="Complication of Cardiac/Vascular Device/Implant/Graft" onClick='togglebtn();'></input>
    <label for="Complication of Cardiac/Vascular Device/Implant/Graft">Complication of Cardiac/Vascular Device/Implant/Graft</label>
  </div>
  <div>
    <input type="checkbox" id="Hypotension" name="Cardiovascular" value="Hypotension" onClick='togglebtn();'></input>
    <label for="Hypotension">Hypotension</label>
  </div>
    </div>
  <div>
    <input type="checkbox" id="Pulmonary Heart Disease" name="Cardiovascular" value="Pulmonary Heart Disease" onClick='togglebtn();'></input>
    <label for="Pulmonary Heart Disease">Pulmonary Heart Disease</label>
  </div>
    <div>
    <input type="checkbox" id="Cardiac Arrythmia" name="Cardiovascular" value="Cardiac Arrythmia" onClick='togglebtn();'></input>
    <label for="Cardiac Arrythmia">Cardiac Arrythmia</label>
  </div>
</fieldset>


<div align="right">
<input type="button" name ='Submit' id ='Submit' disabled = "true" style="color:black" value='Submit' onClick='WriteDx();'></input>
</div>

</form>
</body>

</html>

Answer 1

我为一个问题添加了元标记。

<meta http-equiv="x-ua-compatible" content="IE=10" charset="utf-8">

然后通过可折叠按钮解决。

 <button class="collapsible"

带有可折叠复选框的嵌套FieldSet-与IE8兼容

1 个答案: