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 ...
随机推荐
- 芯片TPS76030、TPS76032、TPS76033、TPS76038、TPS76050 电源芯片
下图是从网上摘出来的图片:TPS76033 它的作用就是改变电压: 输入电压:3.5V到16V 通过芯片的处理后 输出电压:3.3V 要学会看图,从中提取有用的信息 再看一个数据手 ...
- Javascript和jquery事件--鼠标右键事件，contextmenu
右键点击触发是浏览器的默认菜单事件contextmenu,你可以选择阻止它,使用event.preventDefault();或者return false;. 想要定义右键点击事件,关注的是mouse ...
- Instant Client 配置
Instant Client Download 选择 Instant Client for Microsoft Windows (32-bit) 由于PL/SQL Developer 不支持64b ...
- ehcache、memcache、redis三大缓存比较(转)
最近项目组有用到这三个缓存,去各自的官方看了下,觉得还真的各有千秋!今天特意归纳下各个缓存的优缺点,仅供参考! Ehcache 在Java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS ...
- SVN—怎样安装SVNclient软件
一.怎样安装TortoiseSVN-1.7.12.24070-win32-svn-1.7.9版本号的SVNclient软件: a.下载TortoiseSVN-1.7.12 ...
- thinkphp5最最最最简单的ajax实例
thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...
- ThinkPHP视图查询
ThinkPHP视图查询 一.总结 1.这里的视图查询和多表查询很像,当然多表查询的话肯定要支持左右链接查询 2.view:视图的使用,关键字是view 3.sql视图功能支持:thinkphp支持视 ...
- [Angular2 Form] Reactive Form, FormBuilder
Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/comm ...
- 【UIL框架】Universal-Image-Loader全然解析(一)之介绍与使用具体解释
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50439814 本文出自:[江清清的博客] (一).前言: [好消息] ...
- ASCII码的问题
数字0在ASCII的不同进制下表示: