zoukankan      html  css  js  c++  java
  • jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应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" 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>

    复制代码

    _______________

  • 相关阅读:
    Leetcode 811. Subdomain Visit Count
    Leetcode 70. Climbing Stairs
    Leetcode 509. Fibonacci Number
    Leetcode 771. Jewels and Stones
    Leetcode 217. Contains Duplicate
    MYSQL安装第三步报错
    .net 开发WEB程序
    JDK版本问题
    打开ECLIPSE 报failed to load the jni shared library
    ANSI_NULLS SQL语句
  • 原文地址:https://www.cnblogs.com/jpfss/p/9705354.html
Copyright © 2011-2022 走看看