复选框checkbox控制多个内容的显示与隐藏

最新推荐文章于 2021-10-30 17:19:05 发布

wczhashi

最新推荐文章于 2021-10-30 17:19:05 发布

阅读量5.1k

点赞数 1

分类专栏： WEB脚本文章标签：复选框 checkbox 控制显示与隐藏

本文链接：https://blog.csdn.net/wczhashi/article/details/46833061

版权

这篇博客介绍如何通过复选框(checkbox)来控制相关内容的显示和隐藏。当点击复选框时，对应的内容区域将根据复选框的状态动态显示或隐藏。博客中提到了checkbox的动态循环增加，并强调了内容区域必须与每个复选框一一对应。

摘要由CSDN通过智能技术生成

当点击复选框的时候，对应的内容会根据复选框的选中与否进行展示，checkbox复选款可动态循环增加，对应的内容展示区的内容要与复选框一一对应

代码如下：

样式表部分：

<style type="text/css">
	.b4,.b2,.b3{ display: none}
	.show{ display: block}
</style>

html部分：

<table class="a0">
		<tr>
			<td><input type="checkbox" class="a1" checked>a1</td>
			<td><input type="checkbox" class="a1">a2</td>
			<td><input type="checkbox" class="a1">a3</td>
			<td><input type="checkbox" class="a1">a4</td>
		</tr>
	</table>
	<div class="b0">
	<div class="b1">b1</div>
	<div class="b2">b2</div>
	<div class="