复选框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版本



ssm框架中,如何单个的把数据库中的多选框值,遍历在jsp页面。

效果图为: 1、后台把数据取出来,通过截取字符串,保存成为一个list集合后,传到前端。 2、前段代码如下: 运动 画画 下棋 弹琴 看电影 js中的代码: $(function(){ ...
  • java_xuetu
  • java_xuetu
  • 2017年01月02日 23:44
  • 1987

Android实战简易教程<五十一>(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容易,特写下此篇文章。学习就是要有发散思维,要举一反三,大家也可以根据我的实例进行改编,添加和删除一些功能,这样可以提高你对知...
  • scholar_man
  • scholar_man
  • 2015年09月26日 11:20
  • 786

Android简单获取多个复选框的值

xml文件: xml version="1.0" encoding="utf-8"?>
  • xiatianlong_xtl
  • xiatianlong_xtl
  • 2016年02月04日 10:02
  • 6314

jqgripd隐藏对选checkbox以及caption居中设置

1.隐藏头多选checkbox var myGrid = $("#list"); $("#cb_"+myGrid[0].id).hide();   列表中checkbox隐藏为multisele...
  • paul342
  • paul342
  • 2014年12月26日 11:10
  • 6621

ExtJS4 自动生成控制grid的列显示、隐藏的checkbox

由于某种原因,需要做一个控制grid列显示的checkboxgroup,
  • hu8471479
  • hu8471479
  • 2014年04月24日 12:46
  • 2194

js中将多个checkbox的值传处理并传到后台

js中将多个checkbox的值传处理并传到后台 jsp页面代码如: ${list.fieldName} 不共享 普...
  • yangwenxue_admin
  • yangwenxue_admin
  • 2016年05月25日 19:33
  • 7552

Android-checkbox实现明文显示密码

.xml代码如下:
  • yayun0516
  • yayun0516
  • 2015年01月15日 10:07
  • 1519

为多个checkbox绑定单击事件

当单击一个checkbox时触发一个方法,先判断其是否选中,然后执行相应的操作: /** **************** 选择框点击事件绑定 ************* */ functio...
  • xiaoshuji
  • xiaoshuji
  • 2016年01月29日 13:31
  • 6174

Dorado的复选框简单实现

当然这个方法可能不是那么的理想 但我是一个菜鸟用它做几个比较小的选项还是比较可以的,好了不废话了 。     都应该知道Dorado里面有个checkbox这个控件吧 它就是用来实现复选框的,最开始用...
  • ngszt
  • ngszt
  • 2016年11月18日 10:14
  • 564

ionic之样式复选框

1、实例背景     ionic复选框用的是checkbox,checkbox有各种各样的样式2、实例源码 ionic之样式复选框 ...
  • you23hai45
  • you23hai45
  • 2016年10月19日 22:10
  • 2685
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:复选框checkbox控制多个内容的显示与隐藏
举报原因:
原因补充:

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