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

原创 2015年07月10日 17:12:46

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



相关文章推荐

自定义checkbox 复选框的样式以及控制 checkbox 复选框的大小

先定定义一个selector 在定义一个style @drawable/selector_group 引用即可 ...
  • cyooke
  • cyooke
  • 2016年06月02日 09:49
  • 2069

单个和多个checkbox选中事件

如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,需要的朋友可以参考下## 标题 ##1.通过prop方法获取checked属性,获取的checked返回值为b...
  • Gyb_csdn
  • Gyb_csdn
  • 2016年06月03日 13:50
  • 21133

php获取复选框的值CheckBox的多个值

1html代码 Title 用户名: 密 码: 性别:男 女 ...

JS和后台获取复选框(checkbox)选中项后的文本内容

无标题页 //单选与全选的判断 function check(e, allName){ var all = document.getElementsByName(all...

Android开发——listview中嵌套checkBox复选框实现单选、全选删除列表内容

Android开发——listview中嵌套checkBox复选框实现单选、全选删除列表内容 listView中嵌套复选框进行条目的选中删除操作,我们经常会用到,比如:购物车清单中的商品添加删除,...
  • jxnk25
  • jxnk25
  • 2015年12月19日 14:20
  • 2647

jquery 控制图片实现checkbox复选框效果

jQuery(document).ready(function(){ //返回到当前页面、刷新当前页面时,以前选中的复选框所对应的图片事件 jQuery('input[type=checkbox]...

关于MFC中树形控件(CTreeCtrl)复选框(CheckBox)的显示一致性解决方案

关于MFC中树形控件(CTreeCtrl)复选框(CheckBox)的显示一致性解决方案  树形控件在Windows系统中是很常见的控件,例如资源管理器左侧的窗口中就有用来显示目录的树形视图。树形视图...
  • plzhou
  • plzhou
  • 2015年04月07日 16:59
  • 7360

asp.net中复选框checkbox选中datalist中的商品后显示选中商品的临时表

前台  总价钱:asp:Label ID="lblsum" runat="server" Text="" CssClass="lab" Visible="false">asp:Label>    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:复选框checkbox控制多个内容的显示与隐藏
举报原因:
原因补充:

(最多只允许输入30个字)