複選框顯示/隱藏表單字段已選中/未選中

Question

我正在使用JavaScript來顯示/隱藏表單中的其他字段，具體取決於是否單擊相關複選框。這些字段是隱藏的，當勾選複選框時它們會顯示，但當它未被勾選時，不會隱藏。但是，當我再次勾選複選框時，這些字段會隱藏。

我有複選框id='cb_post'和onclick命令從我的外部JavaScript文件中獲取showDiv()。我也有隱藏字段id='hiddenDiv'。

我的JavaScript腳本很簡單：

function showDiv() { 
    if (document.getElementById('hiddenDiv').style.display == 'block') { 
     (document.getElementById('hiddenDiv').style.display = 'none'); 
    } else { 
     document.getElementById('hiddenDiv').style.display = 'block'; 

    } 
} 

任何人都可以就如何隱藏字段時複選框取消選中是建議？

Answer 1

你應該考慮使用jQuery

$("#hiddenDiv").hide(); 
$("#hiddenDiv").show(); 

和東西更好

$("#hiddenDiv").fadeOut(); 
$("#hiddenDiv").fadeIn(); 

Answer 2

我認爲使用jQuery的切換會更適合您的問題：

<input type="checkbox" id="cb_post"> 
<div id = "hiddenDiv"> 
<li>Toggle me</li> 
</div> 

$("#cb_post").on('click', function(){ 

    $("#hiddenDiv").toggle(); 

}); 

也許使用事件onchange而不是onclick會更優雅。

https://jsfiddle.net/qqL0sxxs/

Answer 3

這裏是工作代碼：

var chebx = document.getElementsByClassName('toggleField'); 
 

 
for (var i = 0; i < chebx.length; i++) { 
 
    chebx[i].addEventListener('click', toggleField, false); 
 
} 
 

 
function toggleField() { 
 
    var field = document.getElementById(this.dataset.target); 
 

 
    if (field) { 
 
    switch (this.checked) { 
 
     case true: 
 
     if (field.classList.contains('hide')) { 
 
      field.classList.remove('hide'); 
 
     } else { 
 
      field.classList.add('hide'); 
 
     } 
 
     break; 
 
     default: 
 
     break; 
 
    } 
 
    } 
 
}

.hide { 
 
    display: none; 
 
}

<lable for='toggleField'>Toggle Field</lable> 
 
<input type="checkbox" data-target='field1' class='toggleField'> 
 

 
<input type='text' class='hide' id='field1' /> 
 
<hr> 
 
<lable for='toggleField'>Toggle Field</lable> 
 
<input type="checkbox" data-target='field2' class='toggleField'> 
 

 
<input type='text' class='hide' id='field2' />