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;
 } 

我非常希望能得到您的建议。

- user2886091

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

Demo

- Oriol

---

谢谢。它有效。你能解释一下吗？我的函数有什么问题等等？ - user2886091

@user2886091，你的代码没有起作用是因为你应该使用elem.style.display='block'而不是elem.display='block'，以及elem.style.display='none'而不是elem.display:none。此外，每次复选框更改时都需要运行该代码，因此您需要侦听change事件（假设您的代码中没有使用checkBox.onchange = doruc）。 - Oriol

Answer 2

试试这个：

elem.style.display='block'

- karaxuna

Answer 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';}}

关于你的第二个问题，你可以在

标签中写入style="display:none"，或者像你说的那样（为元素添加一个类）。

- lior y

Answer 4

你在最初使用display: none;来隐藏DIV是正确的。

至于你的复选框，请尝试删除getElementById和('powermail_field...之间的空格。

另外，你需要更改：

} else {elem.display:none;}

to:

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

- Rob Gibbons