切换不按预期运行

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>

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

Answer 1

使用班级来切换可见性

＆＃13;

＆＃13;

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

＆＃13;

.hidden { display : none }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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