• 简单的全选和下拉菜单


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
      ul{
        list-style: none;
      }
      .menu{
        display: none;
      }
    </style>
      <meta charset="UTF-8">
      <title></title>
    </head>
    <body>
      <div class="container">
       <ul>
            <li>
              <input type="checkbox" name="checkbox" class="allchose" /><span>车队1</span><span class="btn"> +</span>
              <ul class="menu">
                <li>
                  <input type="checkbox" name="checkbox1" />1号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox2" />2号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox3" />3号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox4" id="checkbox4" />4号车
                </li>
              </ul>
            </li>
            <li>
              <input type="checkbox" name="checkbox" class="allchose" /><span>车队2</span><span class="btn"> +</span>
              <ul class="menu">
                <li>
                  <input type="checkbox" name="checkbox1" />1号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox2" />2号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox3" />3号车
                </li>
                <li>
                  <input type="checkbox" name="checkbox4" id="checkbox4" />4号车
                </li>
              </ul>
            </li>
          </ul>
      </div>
    </body>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
      $(function(){
        $('.btn').click(function(){
          var $menu = $(this).siblings('.menu');
          var flag = $menu.is(':hidden');
          if(flag){
            $menu.slideDown(200);
          }else{
            $menu.slideUp(200);
          };
        });
        
        $('.allchose').click(function(){
           var t = $(this).siblings('.menu').find("input[type='checkbox']");
          if($(this).is(":checked")){
            t.prop("checked",true);
            console.log('我已经被旋转');
          }else{
            t.prop("checked",false);
          }
        })
      })
    </script>
    <script>
    
    </script>
    </html>

  • 相关阅读:
    服务器重启后oracle监听无法打开
    Resport 四则运算
    For循环
    do...while循环
    Day03_Class01
    自学JavaDay02_class02
    自学JavaDay02_class01
    自学JavaDay01
    基本的Dos命令
    MarkDown语法
  • 原文地址:https://www.cnblogs.com/TTTK/p/6307541.html
Copyright © 2020-2023  润新知