如果複選框已被選中，則使用JavaScript更改CSS可見性

在下面的代碼片段中，當複選框被選中時，應該隱藏藍色div。然而，事實並非如此。我已經嘗試了很多不同的語法，但到目前爲止還沒有運氣。如果複選框已被選中，則使用JavaScript更改CSS可見性

if (document.getElementById("check".checked = "true")) { 
 
     document.getElementById("box").style.visibility = "hidden"; 
 
}

#box { 
 
     background: lightblue; 
 
     width: 200px; 
 
     height: 200px; 
 
}

<input type="checkbox" id="check"> 
 
<div id="box"></div>

來源

2015-11-16 SoKeT

請在問題中發佈您的代碼。 –

'document.getElementById（「check」.checked =「true」）' 如果您認爲這是該代碼的唯一問題，那麼您需要在if語句中使用雙重== == –

@SalminSkenderovic您可能需要注意當它到來時的答案。 –

這就是你想要的。 http://jsfiddle.net/3ywqy72w/8/

上面放置的代碼存在許多問題。

在HTML中，您需要調用JavaScript的函數才能在點擊複選框後執行某些操作。看起來像這樣：

<input type="checkbox" id="check" onclick="toggleBoxVisibility()">

在Javascript中，您還沒有創建函數，一旦onClick被調用將用於使代碼發生。這看起來是這樣的：

function toggleBoxVisibility() { 

if (document.getElementById("check").checked == true) { 

    document.getElementById("box").style.visibility = "visible"; 

    } 
else { 

    document.getElementById("box").style.visibility = "hidden"; 

    } 
}

請注意一些語法。在你的代碼中，只有一個「=」設置了一個值。這在if語句中不會做任何事情。要比較值，必須使用兩個，如上所示。

最後，你只是檢查一次，看看複選框是否被選中，而不是相反。那隻會工作一次，永遠不會顯示相反的情況。

來源

2015-11-16 20:08:24 Dei8cb

這就是我正在尋找的。最後，我最終改變了位置（絕對/固定）而不是可見度，但是我實現了我想要做的事情：按下按鈕時會從屏幕左側彈出一個導航菜單，該按鈕會隨着僅當菜單可見時才顯示頁面。所以當複選框被選中時，按鈕的位置是固定的，否則它是絕對的，效果真的很好。謝謝你的幫助！ – SoKeT

首先，在你的HTML你有兩個元素。在JavaScript中，最簡單的方法是獲取並保存對兩者的引用。

var box = document.getElementById('box'); 
var checkbox = document.getElementById('check');

然後，您需要監聽對複選框的更改。沒有「檢查」事件，所以您需要聽取任何「更改」。

// Put the 'event listener' on the 'check' element. 
// It will run when the checkbox changes (is checked or unchecked) 
checkbox.addEventListener('change', function(){ 
    alert('changed'); 
});

最後事件偵聽器中，您可以添加更多的代碼來進行檢查，看是否複選框的狀態進行檢查。

checkbox.addEventListener('change', function(){ 
    alert('changed'); 
    // The checkbox element 'check' has a property 'checked' that you can access 
    // If it is checked set the color one way, otherwise the other. 
    if(checkbox.checked) { 
     box.style.backgroundColor = 'red'; 
    } else { 
     box.style.backgroundColor = 'lightblue'; 
    } 
});

Here is a fiddle

如需進一步閱讀，你可以查看getElementById和EventListeners和Style Object

作爲一個說明你的JavaScript

if (document.getElementById("check".checked = "true")) { 
     document.getElementById("box").style.visibility = "hidden"; 
}

中的代碼IF語句是正確的。 IF聲明本身試圖一次做太多事情。你可能忘記了一對右括號或把它放在錯誤的地方。但是你也可以忽略明確的'真實'檢查。嘗試將下面的代碼放在事件監聽器中。

if (document.getElementById("check").checked) { 
    document.getElementById("box").style.visibility = "hidden"; 
}

來源

2015-11-16 19:58:33 Ben

有你去。注意：如果您支持Internet Explorer 8或更低版本，則需要使用舊式事件處理程序。 –

如果複選框已被選中，則使用JavaScript更改CSS可見性

回答

相關問題