javascript隐藏/显示div on复选框:选中/未选中

javascript隐藏/显示div on复选框:选中/未选中,javascript,css,checkbox,Javascript,Css,Checkbox,我正在尝试用javascript创建一个函数,该函数将根据复选框的状态(选中与否)在注册表单中隐藏/显示特定的div。 以下是我的功能: function doruc() { var elem = document.getElementById('powermail_fieldwrap_331'); if (document.getElementById ('powermail_field_doruovaciaadresa2_1').checked) {

我正在尝试用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;
 } 
我非常感谢您的建议。

试试以下方法:

elem.style.display='block'
你可以用

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


如果您想在默认情况下隐藏它,可以使用
#powermail\u fieldwrap\u 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();

你应该这样写:

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

关于第二个问题,您可以在div标记中写入
style=“display:none”
,也可以按照您所说的操作(为元素添加一个类)。

您使用display:none是正确的;最初隐藏您的DIV

对于您的复选框,请尝试删除getELementById和('powermail_字段

您还需要更改:

} else {elem.display:none;}
致:


谢谢。它可以工作。你能给我解释一下吗?我的函数有什么问题吗?等等?@user2886091你的代码没有工作,因为你应该使用
elem.style.display='block'
而不是
elem.display='block'
,以及
elem.style.display='none'
而不是
elem.display:none
。此外,你需要若要在每次更改复选框时运行该代码,则需要侦听
change
事件(假设代码中未使用
checkbox.onchange=doruc
} else {elem.display = 'none';}