Toggle 未按预期运行

Question

以下代码工作正常：

function toggleVis(id) {

  var e = document.getElementById(id);
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block'; 
}

<label onclick='toggleVis("weapon-set");' for='checkboxes-0'>
  <input type='checkbox' name='checkboxes' id='checkboxes-0' value='1'>
  Weapon
</label>

<fieldset id='weapon-set' class='toggle'><legend>Weapon</legend></fieldset>

我可以单击复选框或标签来打开或关闭字段集的可见性。但是，如果我将字段集的初始可见性设置为 display:none；使用 CSS 选择器，我只能使用复选框来切换可见性。关于如何使标签切换正常工作的任何想法？

Answer 1

使用 class 切换可见性

function toggleVis(id) {
  var elem = document.getElementById(id);
  elem.classList.toggle("hidden");
}

.hidden { display : none }

<label  for='checkboxes-0'>
  <input type='checkbox' name='checkboxes' id='checkboxes-0' value='1' onchange='toggleVis("weapon-set");'>
  Weapon
</label>

<fieldset id='weapon-set' class='toggle'><legend>Weapon</legend></fieldset>

您也可以将其基于复选框状态而不是默认状态。

Toggle 未按预期运行

Toggle Not Functioning As Expected

html

javascript

css

forms

toggle