关闭

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

标签: 复选框checkbox控制显示与隐藏
130人阅读 评论(0) 收藏 举报
分类:

当点击复选框的时候,对应的内容会根据复选框的选中与否进行展示,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="b3">b3</div>
	<div class="b4">b4</div>
	</div>

脚本部分:

<script type="text/javascript" language="javascript">
$(function(){
		$(".a0 tr td").each(function(index, element) {
			
				$(this).children("input").click(function(){

						if($(this).is(':checked'))
							{ 
								$(".b0 div:eq("+index+")").show()

							}else{
								$(".b0 div:eq("+index+")").hide()
							}
console.log(this)
					})                
            });
})
</script> 

请务必引用jquery,建议1.9X版本



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:132次
    • 积分:11
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档