[英]How can I add/remove an html element depending on a checkbox being selected with only javascript?
我希望僅在選中表單中的復選框時才會顯示html。 我該如何僅使用javascript？
<html>
<head><title>test</title></head>
<body>
<form>
<input type="checkbox" id="exampleCheckbox">
</form>
<div id="toggleElement"></div>
</body>
</html>
編輯：我嘗試過，但未取消選擇后不會消失：
<html>
<head><title>test</title></head>
<body>
<form>
<input type="checkbox" id="exampleCheckbox" onclick="showDiv()">
</form>
<div id="toggleElement"></div>
<script>
function showDiv() {
document.getElementById("toggleElement").innerHTML = "Hello world!";
}
</script>
</body>
</html>
您可以使用eventlistener來做到這一點：
document.getElementById("checkbox").addEventListener('change',function() {
var hidden = document.getElementById("html");
if (this.checked) {
hidden.style.display = "block";
} else {
hidden.style.display = "none";
}
})
您可以將onchange事件添加到復選框，如下所示：
<input type="checkbox" id="exampleCheckbox" onchange="myFunction()">
因此，當復選框更改時，將調用myFunction 。
然后在您的腳本中：
function myFunction()
{
// First check the state of the checkbox:
if (document.getELementById("exampleCheckbox").checked) {
// if it is checked, show the element:
document.getElementById("toggleElement").style.visibility = "visible"; // make the div visible
} else {
// the checkbox is unchecked
document.getElementById("toggleElement").style.visibility = "hidden"; // make the div invisible
}
}
根據JavaScript條件，僅將特定元素添加到html正文
[英]Add only specific element to html body depending on javascript condition
使用Javascript選擇鏈接時，如何隱藏HTML元素？
[英]How can I hide a HTML element when a link is selected with Javascript?
如何訪問在JavaScript中選擇的HTML元素（月選擇器）
[英]How can I access the HTML element selected (monthpicker) in Javascript
在這種特定情況下，如何使用 javascript 刪除 HTML 元素
[英]How can I remove an HTML element using javascript in this specific situation
如何在純 JavaScript 中向元素添加和刪除活動類
[英]How can I add and remove an active class to an element in pure JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.