使用严格的JavaScript隐藏和显示Div，没有嵌入式JS或CSS

Question

我已经搜索并搜索了许多先前回答的问题，令我惊讶的是，他们都没有回答我要完成的工作。使用jQuery这很容易，但我在严格的JavaScript中挣扎。

我不能在HTML中使用任何嵌入的JS或CSS ...

这是我到目前为止所拥有的：

function showhide()
{
    var billingaddress = document.getElementById("billingaddress");
    if (billingaddress.style.display === "block")
        {
            billingaddress.style.display = "none";
        }
    else if (billingaddress.style.display === "none")
        {
            billingaddress.style.display = "block";
        }
}
function init () 
{   
    var billingcheckbox = document.getElementById("billing");
    if (billingcheckbox.checked)
        {
            showhide();
        } 
    else 
        {
            showhide();
        } 

默认使用CSS隐藏。

欢呼，

Answer 1

使用您提供的代码，可以这样完成。

billingaddress.style.display默认情况下是空的，您可以在没有比较的情况下轻松检查它。

function showhide() {
  if (billingaddress.style.display) billingaddress.style.display = ""
  else billingaddress.style.display = 'none';
}
var billingaddress = document.getElementById("billingaddress")
var billingcheckbox = document.getElementById("billing")
billingcheckbox.addEventListener('change', showhide)
billingcheckbox.checked = true
showhide()

<input type="checkbox" id="billing"/> Hide
<div id="billingaddress">Lorem Ipsum</div>

Answer 2

这很容易：

此关键字内部事件处理程序参考复选框元素，因此您可以通过此.Checked属性获得复选框状态。

<input type="checkbox" id="billing">
<input type="text" id="billingaddress" placeholder="Address" style="display:none">
<script>
  var billingAddress = document.getElementById("billingaddress");
  var billingCheckbox = document.getElementById("billing");
  billingCheckbox.addEventListener('click', function(event) {
    billingAddress.style.display = this.checked ? "block" : "none";
  })
</script>

Answer 3

下面的代码应该这样做 - 但是要确保您的所有ID都与HTML标记中的内容相匹配：

function showhide(show) {   
    var billingaddress = document.getElementById("billingaddress"); 
    if (show) { 
        billingaddress.style.display = "block"; 
    } else {    
        billingaddress.style.display = "none";
    }
}   
function init () {   
    var billingcheckbox = document.getElementById("billing");   
    if (billingcheckbox.checked) {  
        showhide(true); 
    } else {    
        showhide(false);
    }
}