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

当点击复选框的时候,对应的内容会根据复选框的选中与否进行展示,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版本



阅读更多
个人分类: WEB脚本
想对作者说点什么? 我来说一句

js 实现 使用checkbox控制文本框

2010年03月31日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭