jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>jQuery实现复选框的全选、反选、并且根据复选框的（checked属性）控制多个对应div的显示/隐藏</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<style type="text/css">
#check_all{
margin-left: 45px;
}
.shows{
display: none;
width: 500px;
height: 300;
background-color: antiquewhite;
border-radius: 5px;
box-shadow: 3px 3px 3px #ccc;
color: blue;
padding: 20px;
line-height: 30px;
margin-bottom: 20px;
}
.shows div{
text-align: center;
margin-bottom: 10px;
color:dodgerblue
}
</style>
<body>
<div><input type="checkbox" id="check_all" /> 全选</div>
<ul id="music_list">
<li><label><input name="music_check" type="checkbox" value="music_1"> 1.时间都去哪儿了</label></li>
<li><label><input name="music_check" type="checkbox" value="music_2"> 2.海阔天空</label></li>
<li><label><input name="music_check" type="checkbox" value="music_3"> 3.真的爱你</label></li>
<li><label><input name="music_check" type="checkbox" value="music_4"> 4.不再犹豫</label></li>
<li><label><input name="music_check" type="checkbox" value="music_5"> 5.光辉岁月</label></li>
<li><label><input name="music_check" type="checkbox" value="music_6"> 6.喜欢妳</label></li>
</ul>
<div class="songs">
<div class="shows" id="music_1"><div>时间都去哪儿了</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
<div class="shows" id="music_2"><div>海阔天空</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
<div class="shows" id="music_3"><div>真的爱你</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
<div class="shows" id="music_4"><div>不再犹豫</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
<div class="shows" id="music_5"><div>光辉岁月</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
<div class="shows" id="music_6"><div>喜欢妳</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
</div>
</div> <script type="text/javascript">
$(document).ready(function() {
//全选
$("#check_all").click(function(){
if($(this).prop("checked") == true){
$(this).attr("checked","checked");
$("#music_list :checkbox").prop("checked", true);
$('.shows').css('display','block');
}else if($(this).prop("checked") == false){
$(this).removeAttr("checked");
$("#music_list :checkbox").prop("checked",false);
$('.shows').css('display','none');
}
});
//checked复选框控制相应div的显/隐
$("input[name='music_check']").each(function (){
$(this).click(function () {
//if(this.checked){
if ($(this).prop("checked") == true){
$("#" + $(this).val()).show();
//$(this).attr("checked",true);
} else {
$("#" + $(this).val()).hide();
//$(this).attr("checked",false);
}
});
}); });
</script>
</body>
</html>
_______________
jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏的更多相关文章
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
- jQuery通过判断 checkbox 元素的 checked 属性，判断 checkbox是否被选中
jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...
- jQuery控制checkbox选中状态但是不显示选中
问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...
- 【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jQuery学习(五)——使用JQ完成复选框的全选和全不选
1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...
- jQuery 实现复选框的全选与反选
<script> //实现全选与反选 $(".allAndNotAll").click(function () { if ($(this).prop("che ...
- jQuery实现复选框的全选与全不选
对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked ...
随机推荐
- 00103_死锁、Lock接口、等待唤醒机制
1.死锁 (1)同步锁使用的弊端:当线程任务中出现了多个同步(多个锁)时,如果同步中嵌套了其他的同步.这时容易引发一种现象:程序出现无限等待,这种现象我们称为死锁.这种情况能避免就避免掉: synch ...
- js进阶 13-7 如何实现滑动面板效果
js进阶 13-7 如何实现滑动面板效果 一.总结 一句话总结:就是普通的jquery动画中的滑动效果.$('#content').slideToggle().滑动效果的实质是通过调整高度. 1.滑动 ...
- 参数传递方法（用Delphi的汇编代码解释）
参数传递方法 李纬的InsideVCL<第一章>中提到Windows定义的回调函数 typedef LRESULT (CALLBACK*WNDPROC)(HWND,UNIT,WPARAM, ...
- MVC中url路由规则
Routing:首先获取视图页面传过来的请求,并接受url路径中的controller和action以及参数数据,根据规则将识别出来的数据传递给某controller中的某个action方法 MapR ...
- ArcSDE中空间数据的备份与恢复
在采用文件形式空间数据的时代,空间数据的备份仅仅是操作系统中的文件拷贝.备份和归档的过程:而空间数据的恢复也不过是复制.覆盖的操作:在基于ArcSDE和关系型数据库的空间数据库时代,空间数据的备份更多 ...
- zynq修改ramdisk文件系统
⑴ 挂载 Ramdisk新建目录 tmp, 并将 uramdisk.image.gz 拷贝至该目录$ cd <WORKDIR>/Filesystem$ mkdir tmp$ cp uram ...
- Spark Streaming教程
废话不说,先来个示例,有个感性认识再介绍. 这个示例来自spark自带的example,基本步骤如下: (1)使用以下命令输入流消息: $ nc -lk 9999 (2)在一个新的终端中运行Net ...
- Caffe 安装 Ubuntu14.04+CUDA7.0/7.5（亲测有效）
自己安装Caffe的过程中,参考了很多资料,但由于版本或者其他原因,安装过程中总是遇到这样或者那样的问题,因此留做记录,方便之后查看,也希望对遇到相似麻烦的朋友们提供帮助. 下面我们开始安装吧: 硬 ...
- linux下实现监控进程网络带宽
嗯,近期都在网易游戏实习,所以貌似有段时间没有上来写点东西了... 来网易游戏实习最基本的目的事实上就是想知道在游戏公司里面工作都是些什么内容,毕竟自己曾经也没有接触过游戏公司.. 还比較的好奇.. ...
- 开源分享三（炫酷的Android Loading动画）
开源分享三(炫酷的Android Loading动画) 分享GitHub上的一些Loading,为了提升产品用户体验,一个好的Loading必然是不可缺少的,对于一些耗时需要用户等待的页面来说会转移用 ...