javascript 在复选框上隐藏/显示 div：选中/未选中答案

【问题标题】：javascript Hide/show div on checkbox: checked/uncheckedjavascript 在复选框上隐藏/显示 div：选中/未选中
【发布时间】：2013-11-13 03:13:54
【问题描述】：

我正在尝试在 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;
 }

如果有任何建议，我将不胜感激。

【问题讨论】：

标签： javascript css checkbox

【解决方案1】：

你可以使用

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

Demo

如果你想默认隐藏它，你可以使用#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();

Demo

【讨论】：

谢谢。有用。你能给我解释一下吗？我的功能出了什么问题等等？
@user2886091 您的代码不起作用，因为您应该使用elem.style.display='block' 而不是elem.display='block'，以及elem.style.display='none' 而不是elem.display:none。此外，每次更改复选框时都需要运行该代码，因此您需要监听 change 事件（假设您没有在代码中使用 checkBox.onchange = doruc）

【解决方案2】：

试试这个：

elem.style.display='block'

【讨论】：

【解决方案3】：

你应该这样写：

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" 或者你可以按照你说的做（为元素添加一个类）。

【讨论】：

【解决方案4】：

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

至于您的复选框，请尝试删除 getELementById 和 ('powermail_field...

你也需要改变：

} else {elem.display:none;}

到：

} else {elem.display = 'none';}

【讨论】：