javascript隐藏/显示div复选框:选中/取消选中

Question

我试图在javascript中创建一个函数,这将隐藏/显示我的注册表单中的特定div,具体取决于我的复选框的状态(选中或不选中).这是我的功能:

 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吗？:

 #powermail_fieldwrap_331{
 display:none;
 } 

我非常感谢任何建议.

Answer 1

你可以用

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;}.但如果你想确定,更好地使用

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();

演示