<!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的显示/隐藏
原文地址：http://www.cnblogs.com/cuizhenyu/p/7426368.html