1. <!doctype html><html>
  2. <head>
  3.   <meta charset="utf-8">
  4.   <title>jQuery实现复选框的全选、反选、并且根据复选框的（checked属性）控制多个对应div的显示/隐藏</title>
  5.  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
  6. </head>
  7. <style type="text/css">
  8.     #check_all{
  9.         margin-left: 45px;
  10.     }
  11.     .shows{
  12.         display: none;
  13.         width: 500px;
  14.         height: 300;
  15.         background-color: antiquewhite;
  16.         border-radius: 5px;
  17.         box-shadow: 3px 3px 3px #ccc;
  18.         color: blue;
  19.         padding: 20px;
  20.         line-height: 30px;
  21.         margin-bottom: 20px;
  22.     }
  23.     .shows div{
  24.         text-align: center;
  25.         margin-bottom: 10px;
  26.         color:dodgerblue
  27.     }
  28. </style>
  29. <body>
  30. <div><input type="checkbox" id="check_all" />&nbsp;全选</div>
  31. <ul id="music_list">
  32.    <li><label><input name="music_check" type="checkbox" value="music_1"> 1.时间都去哪儿了</label></li>
  33.    <li><label><input name="music_check" type="checkbox" value="music_2"> 2.海阔天空</label></li>
  34.    <li><label><input name="music_check" type="checkbox" value="music_3"> 3.真的爱你</label></li>
  35.    <li><label><input name="music_check" type="checkbox" value="music_4"> 4.不再犹豫</label></li>
  36.    <li><label><input name="music_check" type="checkbox" value="music_5"> 5.光辉岁月</label></li>
  37.    <li><label><input name="music_check" type="checkbox" value="music_6"> 6.喜欢妳</label></li>
  38. </ul>
  39. <div class="songs">
  40.     <div class="shows" id="music_1"><div>时间都去哪儿了</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  41.     </div>
  42.     <div class="shows" id="music_2"><div>海阔天空</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  43.     </div>
  44.     <div class="shows" id="music_3"><div>真的爱你</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  45.     </div>
  46.     <div class="shows" id="music_4"><div>不再犹豫</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  47.     </div>
  48.     <div class="shows" id="music_5"><div>光辉岁月</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  49.     </div>
  50.     <div class="shows" id="music_6"><div>喜欢妳</div>门前老树长新芽,院儿里枯木又开花,半生存了好多话,藏进了满头白发,记忆中的小脚丫,肉嘟嘟的小嘴巴,一生把爱交给她,只为那一声爸妈,时间都去哪儿了,还没好好感受年轻就老了,生儿养女一辈子,满脑子都是孩子哭了笑了,时间都去哪儿了,还没好好看看你眼睛就花了,柴米油盐半辈子,转眼就只剩下满脸的皱纹了
  51.     </div>
  52. </div>
  53.  
  54. <script type="text/javascript">

  55. $(document).ready(function() {

  56. //全选

  57. $("#check_all").click(function(){

  58. if($(this).prop("checked") == true){

  59. $(this).attr("checked","checked");

  60. $("#music_list :checkbox").prop("checked", true);

  61. $('.shows').css('display','block');

  62. }else if($(this).prop("checked") == false){

  63. $(this).removeAttr("checked");

  64. $("#music_list :checkbox").prop("checked",false);

  65. $('.shows').css('display','none');

  66. }

  67. });

  68. //checked复选框控制相应div的显/隐

  69. $("input[name='music_check']").each(function (){

  70. $(this).click(function () {

  71. //if(this.checked){

  72. if ($(this).prop("checked") == true){

  73. $("#" + $(this).val()).show();

  74. //$(this).attr("checked",true);

  75. } else {

  76. $("#" + $(this).val()).hide();

  77. //$(this).attr("checked",false);

  78.              }

  79. });

  80. });
  81.  
  82. });

  83. </script>

  84. </body>

  85. </html>

_______________

jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏的更多相关文章

  1. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

    样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...

  3. jQuery通过判断 checkbox 元素的 checked 属性，判断 checkbox是否被选中

    jQuery设置复选框的属性<input type="checkbox"/> $("input").attr("checked" ...

  4. jQuery控制checkbox选中状态但是不显示选中

    问题描述:使用jQuery来控制checkbox的选中状态,但是第一次点击出现选中样式,之后点击可以看到checked的属性增加成功但是并没有选 中状态. 问题代码: function chooseA ...

  5. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  6. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

  7. jQuery学习(五)——使用JQ完成复选框的全选和全不选

    1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框 ...

  8. jQuery 实现复选框的全选与反选

    <script> //实现全选与反选 $(".allAndNotAll").click(function () { if ($(this).prop("che ...

  9. jQuery实现复选框的全选与全不选

    对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked ...

随机推荐

  1. js数组遍历和对象遍历小结

    数组的遍历 for循环 for(var j = 0,len = arr.length; j < len; j++){ console.log(arr[j]); } forEach,性能比for还 ...

  2. 洛谷 P2368 EXCEEDED WARNING B

    P2368 EXCEEDED WARNING B 题目背景 SGU 107 题目描述 求有多少个平方后末尾为987654321的n位数 输入输出格式 输入格式: 整数n 输出格式: 答案,即[b]“平 ...

  3. uvaoj-1595:symmetry

    1595 - Symmetry The figure shown on the left is left-right symmetric as it is possible to fold the s ...

  4. javascript的组成

    ECMAScript:(3/5/6/7) 它是JS语言的标准,规定了JS的编程语法和基础核心知识. DOM:document object model 文档对象模型,提供给JS很多的操作页面中元素的属 ...

  5. APP测试10点

    1.安装和卸载●应用是否可以在IOS不同系统版本或android不同系统版本上安装(有的系统版本过低,应用不能适配)●软件安装后是否可以正常运行,安装后的文件夹及文件是否可以写到指定的目录里.●安装过 ...

  6. 【Codeforces Round #301 (Div. 2) C】 Ice Cave

    [链接] 我是链接,点我呀:) [题意] 给你一个n*m的地图. 每个地图为0的时候可以安全走过,且走过后变成1. (一定要离开之后才会变成1) 而为1的则走过之后会掉入下一层. 你一开始在初始位置( ...

  7. Oracle10g中阻塞锁查询更简单

    http://blog.itpub.net/195110/viewspace-677572/ http://blog.sina.com.cn/s/blog_636415010100khcl.html

  8. uva 10710 - Chinese Shuffle(完美洗牌)

    option=com_onlinejudge&Itemid=8&category=474&page=show_problem&problem=1651"> ...

  9. 9.10 Binder系统_Java实现_hello服务

    怎么做?2.1 定义接口: 写IHelloService.aidl文件, 上传, 编译, 得到IHelloService.java 里面有Stub : onTransact, 它会分辨收到数据然后调用 ...

  10. angular表单知识点

    原文 https://www.jianshu.com/p/c772d143e1fc 大纲 1.对表单的理解 2.模板驱动表单(Template Driven Forms) 3.响应式表单(Reacti ...