javascript隐藏/显示在复选框的div：选中/未选中

我想在javascript中创建一个函数，这将根据我的复选框的状态（选中或不选），在我的注册表单中隐藏/显示特定的div。这是我的功能：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; 
}

我非常感谢任何建议。

来源

2013-11-01 user2886091

你可以使用

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

来源

2013-11-01 20:33:39 Oriol

谢谢。它可以工作，你能解释一下给我吗？我的功能有什么问题等等？ – user2886091

@ user2886091你的代码没有工作，因为你应该使用'elem.style.display ='block''而不是'el em.display ='block''，而'elem.style.display ='none''而不是'elem.display：none'。而且，每次更改复选框时都需要运行该代码，因此您需要监听'change'事件（假设您没有在代码中使用'checkBox.onchange = doruc'） – Oriol

试试这个：

elem.style.display='block'

来源

2013-11-01 20:31:39 karaxuna

你应该写这样的：

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

来源

2013-11-01 20:36:11

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

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

你也需要改变：

} else {elem.display:none;}

到：

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

来源

2013-11-01 20:37:02

javascript隐藏/显示在复选框的div：选中/未选中

回答

相关问题