复选框显示/隐藏表单字段已选中/未选中

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