[英]Show/Hide Form Fields on checkbox checked/unchecked
I'm using JavaScript to show/hide additional fields in my form depending on whether the relevant checkbox is clicked. 我使用JavaScript来显示/隐藏表单中的其他字段,具体取决于是否单击了相关复选框。 The fields are hidden and they do show when the checkbox is ticked, but DO NOT hide when it is un-ticked. 这些字段是隐藏的,并且在选中复选框时会显示,但在未选中时不要隐藏。 However, the fields do hide when I tick the checkbox again. 但是,当我再次选中复选框时,这些字段确实隐藏。
I have the checkbox with id='cb_post'
and an onclick
command to fetch showDiv()
from my external javascript file. 我有一个id='cb_post'
的复选框和一个onclick
命令,可以从我的外部javascript文件中获取showDiv()
。 I also have the hidden field with id='hiddenDiv'
. 我也有id='hiddenDiv'
的隐藏字段。
My javascript script is simple: 我的JavaScript脚本很简单:
function showDiv() {
if (document.getElementById('hiddenDiv').style.display == 'block') {
(document.getElementById('hiddenDiv').style.display = 'none');
} else {
document.getElementById('hiddenDiv').style.display = 'block';
}
}
Can anyone advise on how to hide the fields when the checkbox is unticked? 任何人都可以建议取消选中复选框时如何隐藏字段吗?
I think using jQuery toggle would fit better for your problem: 我认为使用jQuery切换更适合您的问题:
<input type="checkbox" id="cb_post">
<div id = "hiddenDiv">
<li>Toggle me</li>
</div>
$("#cb_post").on('click', function(){
$("#hiddenDiv").toggle();
});
Maybe using the event onchange
instead of onclick
would be more elegant. 也许使用事件onchange
而不是onclick
会更优雅。
https://jsfiddle.net/qqL0sxxs/ https://jsfiddle.net/qqL0sxxs/
Here is working code : 这是工作代码:
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' />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.