📌  相关文章
📜  onclick checkbox hide div and unchecked show div - Javascript(1)

📅  最后修改于: 2023-12-03 15:03:21.956000             🧑  作者: Mango

Javascript实现点击复选框显示和隐藏div

简介

本文将介绍如何使用Javascript实现点击复选框显示和隐藏div。通过学习本文，程序员可以掌握如何使用Javascript控制HTML元素的显示和隐藏，同时也可以了解如何使用HTML复选框和Javascript事件处理程序。

步骤
HTML布局

首先，我们需要在HTML页面中创建一个复选框和两个div元素，其中一个用于显示，另一个用于隐藏。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>Checkbox - Show/Hide Div Element</title>
</head>
<body>

	<input type="checkbox" id="checkbox">Check to Show Div</input>

	<div id="show" style="display: none;">
		<h2>Show Div</h2>
		<p>This div will be shown when the checkbox is checked.</p>
	</div>

	<div id="hide">
		<h2>Hide Div</h2>
		<p>This div will be hidden when the checkbox is checked.</p>
	</div>

</body>
</html>

在上面的示例中，我们创建了一个复选框元素，并创建了两个div元素。其中，一个div元素被隐藏（style属性值为“display: none;”），另一个div元素的默认状态是显示的。

Javascript代码

接下来，我们需要编写Javascript代码来处理复选框的点击事件。具体来说，我们需要在复选框被勾选时显示div元素，而在复选框取消勾选时将其隐藏。

以下是通过Javascript代码实现的示例：

// 获取复选框元素
var checkbox = document.getElementById("checkbox");

// 获取显示和隐藏的div元素
var showDiv = document.getElementById("show");
var hideDiv = document.getElementById("hide");

// 添加点击事件处理程序
checkbox.onclick = function() {
	if(this.checked) {
		showDiv.style.display = "block";
		hideDiv.style.display = "none";
	}
	else {
		showDiv.style.display = "none";
		hideDiv.style.display = "block";
	}
};

在上述代码中，我们首先使用getElementById()方法获取复选框和div元素的引用。然后，我们将一个事件处理程序（onclick）添加到复选框元素。当复选框状态改变时，事件处理程序将根据复选框的状态来显示或隐藏相关div元素。

总结

本文介绍了如何使用Javascript实现点击复选框显示和隐藏div元素。对于程序员而言，掌握HTML和Javascript的基础知识是重要的。希望本文能给您带来一些帮助。