jQuery实现复选框的全选、反选、并且根据复选框的控制多个对应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" /> 全选</div>
<ul >
<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" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</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>
_______________
<!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" /> 全选</div>
<ul >
<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" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</div>
<div class="shows" >转眼就只剩下满脸的皱纹了
</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>