zoukankan      html  css  js  c++  java
  • 切换选项卡时,保留复选框勾选(2)

    原文: 切换选项卡时,保留复选框勾选(1)
    更新内容:将选项卡显示隐藏做了封装等,考虑了更多选项卡的情况,有待更优解~~
    更新后代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        .top {
           100%;
          height: 200px;
          border: 1px solid #ddd;
        }
        .checks-outter {
          margin-top: 8px;
          padding-left: 10px;
        }
        a {
          border:1px solid #ddd;
          border-radius: 3px;
          padding:2px 6px;
          text-decoration: none;
        }
      </style>
    </head>
    <body>
      <div class="top"></div>
      <div class="checks-outter">
        <div class="outter">
          <button class="checkAll">全选</button>
          <button class="checkNone">取消</button>
          <div>
            <a class="data" href="#tab0">数据1</a>
            <a class="data" href="#tab1">数据2</a>
            <a class="data" href="#tab2">数据3</a>
          </div>
        </div>
        <div class="tabs"></div>
      </div>
      <script src="./js/jquery-2.2.4.min.js"></script>
      <script>
        var data1={name:'data1',data:['仓库1','仓库2','仓库3','仓库4','仓库5']};
        var data2={name:'data2',data:['仓库1','仓库3','仓库4','仓库5','仓库7','仓库8']};
        var data3={name:'data3',data:['仓库2','仓库3','仓库6']};
    
        //把html封装,便于根据不同数据获取不同的html
        function getHtml(data) {
          var html="<div class='checks'>";
          for(var i=0;i<data.data.length;i++) {
            html+=`
              <input class="item-${data.name}" type="checkbox" value="${data.data[i]}">
              <span>${data.data[i]}</span>
            `
          }
          html += "</div>";
          return html;
        }
        var flag=0;  //0-data1,1-data2,2-data3
        //把选项卡中的数据渲染出来
        $([getHtml(data1),getHtml(data2),getHtml(data3)].join("")).appendTo($(".tabs"));
        tab(0);
    
        //全选和取消-点击事件
        $(".checkAll").on("click",function() {
          var item = [".item-data1",".item-data2",".item-data3"][flag];
          $(item).prop("checked",true);
        })
        $(".checkNone").on("click",function() {
          var item = [".item-data1",".item-data2",".item-data3"][flag];
          $(item).prop("checked",false);
        })
    
        //点击显示不同的数据
        $(".data").on("click",function() {
          flag=$(this).index();
          tab(flag);
        })
        function tab(index){
          $(".checks").hide().eq(index).show();
        }
      </script>
    </body>
    </html>
    
  • 相关阅读:
    part11-1 Python图形界面编程(Python GUI库介绍、Tkinter 组件介绍、布局管理器、事件处理)
    part10-3 Python常见模块(正则表达式)
    Cyclic Nacklace HDU
    模拟题 Right turn SCU
    状态DP Doing Homework HDU
    Dp Milking Time POJ
    区间DP Treats for the Cows POJ
    DP Help Jimmy POJ
    Dales and Hills Gym
    Kids and Prizes Gym
  • 原文地址:https://www.cnblogs.com/ZerlinM/p/13541762.html
Copyright © 2011-2022 走看看