簡單的全選和下拉菜單

時間  2019-12-07
標籤 簡單 全選 下拉菜單 简体版
原文   原文鏈接 
<!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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程