javascript隐藏/显示复选框：选中/取消选中 [英] javascript Hide/show div on checkbox: checked/unchecked

问题描述

我试图在javascript中创建一个函数，将隐藏/显示特定的div在我的注册表单，取决于我的复选框的状态（选中或不选中）。
这是我的函数：

I am trying to make a function in javascript, that will hide / show particular div in my registration form, depending on the state of my checkbox (checked or not). Here is my function:

 function doruc() {
    var elem = document.getElementById('powermail_fieldwrap_331');
        if (document.getElementById  ('powermail_field_doruovaciaadresa2_1').checked) {
        elem.display='block';
        } else {elem.display:none;}
}

加工。我检查和取消选中我的复选框，但什么也没有发生。哦，还有一件事。我想要的div初始化为隐藏。我应该把我的CSS这个吗？ ：

It isnt working. I am checking and unchecking my checkbox, but nothing happens. Oh and one more thing. I want that div to be initialized as hidden. Should I put in my css this? :

 #powermail_fieldwrap_331{
 display:none;
 } 

我非常感谢任何建议。

推荐答案

您可以使用

var elem = document.getElementById('powermail_fieldwrap_331');
document.getElementById('powermail_field_doruovaciaadresa2_1').onchange = function() {
    elem.style.display = this.checked ? 'block' : 'none';
};

演示

如果您希望默认隐藏，您可以使用＃powermail_fieldwrap_331 {display：none;} 。但是如果你想确定，最好使用

If you want to hide it by default, you could use #powermail_fieldwrap_331{display:none;}. But if you want to be sure, better use

var elem = document.getElementById('powermail_fieldwrap_331'),
    checkBox = document.getElementById('powermail_field_doruovaciaadresa2_1');
checkBox.checked = false;
checkBox.onchange = function doruc() {
    elem.style.display = this.checked ? 'block' : 'none';
};
checkBox.onchange();

演示

这篇关于javascript隐藏/显示复选框：选中/取消选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！