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

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

Answer 2

试试这个：

elem.style.display='block'

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

关于你的第二个问题，你可以写div标签style="display:none"，也可以按照你的说法做（为元素添加一个类）。

Answer 4

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

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

之间的空格

您还需要更改：

} else {elem.display:none;}

为：

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

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

4 个答案: