简单的全选和下拉菜单

<!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>

相关阅读:
select和epoll原理和区别
linux网络编程中的基本概念
linux 基本概念
进程与线程（1）- 基本概念
CI持续集成
git基本操作（入门）
pytest特色与实用插件
使用pabot并行执行robotframework用例
如何编写测试用例
前端_vue-cli+element-ui+AceEditor+codemirror+electron-vue

原文地址：https://www.cnblogs.com/TTTK/p/6307541.html