使用嚴格的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

就這么簡單：

事件處理程序中的this關鍵字引用checkbox元素，因此您可以使用this.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);
    }
}