<!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. Android中的Parcelable接口和Serializable使用方法和差别

    Parcelable接口: Interface for classes whose instances can be written to and restored from a Parcel. Cl ...

  2. Windows Forms 对话框篇

    1,标准对话框 Windows内置的对话框,又叫公用对话框,它们作为组件提供的,并且存在于System.Windows.Forms命名空间中. 手工方式: private void button1_C ...

  3. iCarousel——在iOS和Mac OS应用中实现3D CoverFlow旋转木马效果的开源类库

    前言 iCarousel一个简单.可高度定制的3D CoverFlow开源类库,旨在简化在 iPhone, iPad和Mac OS中生成各种类型的cover flow(视图切换)效果(分页.滚动视图) ...

  4. PythonNET网络编程1

    # PythonNET 网络编程 ISO(国际标准化组织) 制定了 OSI(Open System Interconnectio),意为开放式系统互联.国际标准化组织(ISO)制定了OSI模型,该模型 ...

  5. 【Codeforces Round #445 (Div. 2) D】Restoration of string

    [链接] 我是链接,点我呀:) [题意] 给你n个字符串. 让你构造一个字符串s. 使得这n个字符串. 每个字符串都是s的子串. 且都是出现次数最多的子串. 要求s的长度最短,且s的字典序最小. [题 ...

  6. ThinkPHP视图查询

    ThinkPHP视图查询 一.总结 1.这里的视图查询和多表查询很像,当然多表查询的话肯定要支持左右链接查询 2.view:视图的使用,关键字是view 3.sql视图功能支持:thinkphp支持视 ...

  7. python的list和数组的区别

    list不是数组(额外安装Pynum) 1)可修改,list数据结构内容可以被程序修改 2)可动态增减,长度不固定 3)list里面的数据项可以是不同类型数据,也可以是list 4)两个list可“链 ...

  8. 每日技术总结：jquery datetimepicker,微博QQ好友QQ空间微信等分享接口

    前言: 1.jquery datetimepicker 今天遇到一个日期控件格式的问题,默认选中显示的并不是设定的值,而是当天的日期.于是去查了一遍文档. 参考文章:jquery datetimepi ...

  9. [Nuxt] Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

    You add array of todos to the store simply by adding them to the state defined in your store/index.j ...

  10. IIS7配置PHP图解

    IIS6整合PHP详解:http://zhidao.zgsj.com/article/8/2011118142648.shtml PHP5.2.17 官方下载: http://windows.php. ...