<!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" />&nbsp;全选</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的显示/隐藏的更多相关文章

  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. 调色板原理 & 编程

    调色板原理 & 编程 逻辑调色板结构LOGPALETTE,该结构定义如下: typedef struct tagLOGPALETTE { WORD palVersion; //调色板的板本号, ...

  2. Redfield Water Ripples 2.02（水波滤镜中文绿色版-支持CC)

    Redfield Water Ripples 能够用于设计具有高度现实主义风格的水波纹特效,它提供了诸多属性选项,其 3D 渲染品质另人映像深刻.此滤镜很易用,其随机设定生成器可创建差点儿无限的水波纹 ...

  3. [arm]虚拟机，2440开发板，主机三者互通

    想实现3着互通先必须保证三者的网段是相同的: 首先查看电脑主机的IP: 然后再看看虚拟机的IP: 惊喜的发现,他们在一个网段上---那就不用改了-- 再去看看开发板上的IP: 这里注意,输入命令时,是 ...

  4. AndroidAnnotations使用说明书—AndroidAnnotations是怎样工作的？

    AndroidAnnotations的工作方式非常easy.它使用标准的java注入处理工具,自己主动加入了一个额外的编译步骤来生成源码. 源代码是什么?每个增强的类,比方每个用@EActivity注 ...

  5. 小白学开发（iOS）OC_ 使用继承来扩充类（2015-08-07）

    // //  main.m //  使用继承来扩充类 // //  Created by admin on 15/8/12. //  Copyright (c) 2015年 admin. All ri ...

  6. js循环一维数组按指定长度截取为二维数组

    //随便创建一个数组 let data = "abcdefghijklmnopkrstuvw12322999".split(""); //总数组 let pro ...

  7. 移动web处理input输入框输入银行卡号四位一空格

    由于项目上有需求要求输入银行卡号四位一空格的需求,改过好几版发现都有bug,最后优化了一版看起来效果还行,发帖留存. 难点是从中间插入和删除处理光标问题. 首先需要用到获取光标和设置光标的方法. // ...

  8. 亿格瑞A5-hdmi故障了

    http://cn.egreatworld.com/store/product/egreat-a5-4k-uhd-hdr-blu-ray-navigation-hdd-media-player/ a5 ...

  9. JS生成一个种子随机数（伪随机数）

    原文链接:https://geniuspeng.github.io/2016/09/12/js-random/ 最近有一个需求,需要生成一个随机数,但是又不能完全随机,就是说需要一个种子seed,se ...

  10. 使用LAMP创建基于wordpress的个从博客网站 分类： B3_LINUX 2014-07-15 16:45 800人阅读 评论(0) 收藏

    参考: http://blog.csdn.net/ck_boss/article/details/27866117 一.mysql配置 1.安装mysql yum install mysql-serv ...