Переключение не работает, как ожидалось

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 включения или выключения. Однако, если я установил начальную видимость отображаемого набора полей: none; используя селектор CSS, я могу использовать этот флажок только для переключения видимости. Любые идеи о том, как заставить ярлык работать правильно?

Answer 1

Используйте класс для переключения visibilty

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>

Вы можете также BASE его с флажком состояния, а не в состоянии по умолчанию.