帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。

当前位置：首页 > 资源 > 网页特效 > 正文

bootstrap+jquery多级checkbox复选框选中代码

帝国模板之家 2020-10-29 网页特效 ℃ 评论

本文标签： jquery插件   bootstrap插件   表单

jQuery制作多级复选框，水平垂直checkbox复选框多级选择菜单代码。（不兼容IE6，7，8） ，bootstrap响应式布局。代码如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
/*public*/
.all-checkbox {
    padding: 10px;
}
.borderTop {
    border-top: thin solid #ddd;
}
.borderBottom {
    border-bottom: thin solid #ddd;
}
.borderLeft {
    border-left: thin solid #ddd;
}
.borderRight {
    border-right: thin solid #ddd;
}
.borderNone {
    border-right: none;
}
.ui-checkbox {
    background: url("download.png");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
}
.ui-checkbox.hover {
    background-position-x: -24px;
    cursor: pointer;
}
.ui-checkbox.active-path {
    background-position-x: -48px;
    cursor: pointer;
}
.ui-checkbox.active {
    background-position-x: -72px;
    cursor: pointer;
}
.ui-checkbox.disabled, .ui-checkbox.readonly {
    background-position-x: -120px;
    cursor: no-drop;
}
.div-checkbox {
    width: 100%;
    height: 50px;
    position: relative;
    border-left: thin solid #ddd;
    border-right: thin solid #ddd;
}
.div-checkbox label input[type=checkbox] {
    margin-right: 2px;
    position: relative;
    top: 2px;
    left: 0;
    display: none;
}
.all-checked {
    padding-left: 25px;
    font-weight: normal;
    position: relative;
    cursor: pointer;
}
.all-checked input[type=checkbox] {
    display: none;
}
.div-checkbox label {
    margin: 0px;
    padding-left: 25px;
    cursor: pointer;
    font-weight: normal;
    position: relative;
}
/* horizontal*/
.title {
    overflow: hidden;
    text-align: center;
    border-top: thin solid #ddd;
}
/*  .title div{
    font-weight: bolder;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5%;
    padding-right: 5%;
    border-right:thin solid #ddd;
  }*/
.div-checkbox:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.div-checkbox:last-child {
    border-bottom: thin solid #ddd;
}
._border_ {
    border-top: thin solid #ddd;
    border-right: thin solid #ddd;
}
.title div {
    font-weight: bolder;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5%;
    padding-right: 5%;
    border-right: thin solid #ddd;
}
.title div:last-child {
    border-right: none;
}
.check-box {
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 20%;
    height: 100%;
    text-align: center;
}
.check-align-left {
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
}
.check-absolute {
    position: absolute !important;
    top: 0;
    left: 0;
}
.check-box .absolute-center {
    left: 50%;
    top: 50%;
    margin-left: -6px;
    margin-top: -6px;
}
.main {
    width: 100%;
    height: 100%;
}
.second {
    width: 20%;
    left: 20%;
    height: 100%;
}
.third {
    left: 100%;
    width: 300%;
}
.check-block {
    width: 100%;
}
._top_ {
    top: 75px
}
.row-of-three {
    width: 33.33%;
    height: 35px;
}
/*vertical*/
.vertical-checkbox {
    overflow: hidden;
}
.vertical-checkbox > div {
    float: left;
}
.vertical-checkbox .title {
    width: 10%;
    text-align: center
}
.vertical-checkbox .title div:last-child {
    border-right: thin solid #ddd;
}
.vertical-checkbox .title > div {
    width: 100% !important;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: thin solid #ddd;
}
.vertical-checkbox .div-checkbox {
    width: 90%;
    height: auto;
}
.vertical-checkbox .all-checked {
    display: block;
}
.vertical-checkbox .div-checkbox {
    border-left: none;
}
.vertical-checkbox .main {
    width: 100%;
    border-top: thin solid #ddd;
    border-left: thin solid #ddd;
}
.vertical-checkbox .second, .vertical-checkbox .third {
    width: 100%;
    border-bottom: none;
    border-right: thin solid #ddd;
}
.vertical-checkbox .second > .levelDIV {
    width: 50% !important;
    float: left;
}
.vertical-checkbox .third p.check-box {
    width: 33.33%;
    float: left;
    border-bottom: none;
}
.vertical-checkbox p.check-box {
    margin: 0px;
    width: 100%;
    height: 70%;
    text-align: center;
    border-bottom: thin solid #ddd;
    border-right: thin solid #ddd;
}
/*Is Level Two Start*/
.level-two .levelDIV {
    overflow: hidden;
}
.level-two .second {
    width: 80%;
}
.level-two .second > .levelDIV:last-child {
    border-bottom: none;
}
.level-two .title > div {
    border-bottom: thin solid #ddd;
}
.level-two .second p.check-box {
    width: 25%;
    float: left;
    height: 40px;
    position: relative;
    border-bottom: thin solid #ddd;
}
.level-two .second p.check-box > label {
    left: 4%;
    top: 15%;
    margin-top: -6px;
    margin-left: -6px;
}
  /*Is Level Two End*/
</style>
  </head>
  <body>
<h4>水平层级</h4>
<div class="all-checkbox">
    <label class="all-checked"> <span class="ui-checkbox"></span>
    <input type="checkbox" name="all-checked" value="">
    全选 </label>
    <div class="title borderRight">
    <div class="borderLeft" style="width:20.05%;">模块标题</div>
    <div style="width:20%;">菜单标题</div>
    <div style="width:20%;">功能标题</div>
  </div>
    <div class="div-checkbox">
    <div class="levelDIV check-absolute main">
        <p class="check-box check-absolute _border_">
        <label class="check-absolute absolute-center"> <span class="ui-checkbox"></span>
            <input type="checkbox" class="absolute-center">
            模块 </label>
      </p>
        <div class="levelDIV check-absolute second">
        <div class="levelDIV">
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <div class="levelDIV check-absolute _border_ third">
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
          </div>
          </div>
        <div class="levelDIV">
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <div class="levelDIV check-absolute _border_ third _top_">
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                ddd </label>
              </p>
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox" checked="true">
                功fff </label>
              </p>
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功ggg </label>
              </p>
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功rrr </label>
              </p>
          </div>
          </div>
        <div class="levelDIV">
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <div class="levelDIV check-absolute _border_ third _top_"><!-- NULL --> 
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
<br/>
<br/>
<h4>垂直层级</h4>
<div class="all-checkbox vertical-checkbox">
    <label class="all-checked"> <span class="ui-checkbox"></span>
    <input type="checkbox" name="all-checked" value="">
    全选 </label>
    <div class="title">
    <div style="width:20.1%;">模块标题</div>
    <div style="width:19.9%;">菜单标题</div>
    <div style="width:20%;">功能标题</div>
  </div>
    <div class="div-checkbox">
    <div class="levelDIV main">
        <p class="check-box">
        <label class=""> <span class="ui-checkbox"></span>
            <input type="checkbox" class="absolute-center">
            模块 </label>
      </p>
        <div class="levelDIV second">
        <div class="levelDIV">
            <p class="check-box">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <div class="levelDIV third ">
            <p class="check-box check-align-left row-of-three">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
            <p class="check-box">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox"  disabled="true">
                功能 </label>
              </p>
          </div>
          </div>
        <div class="levelDIV">
            <p class="check-box">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <div class="levelDIV third ">
            <p class="check-box">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
            <p class="check-box">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
            <p class="check-box">
                <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                功能 </label>
              </p>
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
<h4>水平层级</h4>
<div class="all-checkbox level-two">
    <label class="all-checked"> <span class="ui-checkbox"></span>
    <input type="checkbox" name="all-checked" value="">
    全选 </label>
    <div class="title borderRight">
    <div class="borderLeft" style="width:20.05%;">模块标题</div>
    <div style="width:79.95%;">菜单标题</div>
  </div>
    <div class="div-checkbox">
    <div class="levelDIV check-absolute main">
        <p class="check-box check-absolute _border_">
        <label class="check-absolute absolute-center"> <span class="ui-checkbox"></span>
            <input type="checkbox" class="absolute-center">
            模块 </label>
      </p>
        <div class="levelDIV check-absolute second">
        <div class="levelDIV">
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
          </div>
        <div class="levelDIV">
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
            <p class="check-box check-block _border_">
            <label> <span class="ui-checkbox"></span>
                <input type="checkbox">
                菜单 </label>
          </p>
          </div>
      </div>
      </div>
  </div>
  </div>
<br/>
<br/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    //判断是否全选
    function isAllChecked(){
      $(".all-checkbox").each(function() {
        var $self = $(this)   ,
            all   = $(this).find(":checkbox").not("[name='sales_group_id'],:disabled") ,
            allChecked = $(this).find(":checked").not("[name='all-checked']") ,
            thisAllCheckBtn = $(this).find(".all-checked [name='all-checked']");

        thisAllCheckBtn.on("click",function(){
          if($(this).get(0).checked){
            $(this).prev("span.ui-checkbox").addClass('active');
            $self.find(".levelDIV").find('input:checkbox').not(":disabled").prop('checked' ,true)
            .closest('p.check-box').find('span.ui-checkbox').addClass('active');

          }else{
            $(this).prev("span.ui-checkbox").removeClass('active');
            $self.find(".levelDIV").find('input:checkbox').not(":disabled").prop('checked' ,false)
            .closest('p.check-box').find('span.ui-checkbox').removeClass('active');
          }
        });
        if(all.length === allChecked.length){
          thisAllCheckBtn.prop('checked' ,true).prev("span.ui-checkbox").addClass('active');
        }else{
          thisAllCheckBtn.prop('checked' ,false).prev("span.ui-checkbox").removeClass('active');
        }
      });

    };
    isAllChecked();
    function countCheckboxDOM(obj){
      obj.each(function(){
        var _this_ = $(this)
        if(!_this_.parent().hasClass("vertical-checkbox")){
          // Init
          var IsLevelTwo   = _this_.closest(".all-checkbox").hasClass('level-two');
          var hei          = _this_;
          //var sed          = _this_.find(".second > .levelDIV > p.check-box");
          var sed          = IsLevelTwo?_this_.find(".second > .levelDIV"):_this_.find(".second > .levelDIV .third");
          var levelNum     = IsLevelTwo?_this_.find(".second"):_this_.find(".third");
          var levelNumWid  = levelNum.height();

          // Function
          hei.css("height",levelNumWid * sed.length);

          if(IsLevelTwo){
            sed.each(function() {
              var i = $(this).index();
              sed.eq(i).css("height",sed.get(i).clientHeight);
              var total = 0;
              for(var j = 0 ; j < sed.length ;  j++){
                total += sed.get(j).clientHeight;
              };

              hei.css("height",total);
            });
          }else{
            var t = 0;
            for(var i = 0 ; i < sed.length ; i++){
                var CH = sed.get(i).clientHeight > 0?sed.get(i).clientHeight:35;
              sed.eq(i).css("height" , CH );
              sed.prev("p.check-box").eq(i).css("height" , sed.get(i).clientHeight + 1);
              if(i>0){
                var height = sed.eq(i-1).css("height");
                var top    = sed.eq(i-1).css("top");
                var total =  parseFloat(height.substring(0,height.length-2)) + parseFloat(top.substring(0,top.length-2));
                levelNum.eq(i).css("top",total);  
              }
              t += levelNum.eq(i).height() + 1;
            }
            hei.css("height",t);
          };
          
          // for(var i = 0 ; i < levelNum.length ; i++){
          //   levelNum.eq(i).css("top",(hei.height()/sed.length)*i);  
          // }
        }
      });         
    }

    function setDisable(obj){
      obj.each(function() {
        if($(this).is(":disabled") ){
          if($(this).closest(".levelDIV").find("div").length > 0){
            $(this).closest(".levelDIV").find("input:checkbox").prop('disabled', true);
          }
          $(this).prev(".ui-checkbox").addClass('disabled');
        }
      });
    };
// ----------------------------------------------------------------
    var eachDIV      =  $(".div-checkbox") ,
        allLevelDIV  =  eachDIV.find(".levelDIV") ,
        CheckBox     =  eachDIV.find("[type=checkbox]") ;
        countCheckboxDOM(eachDIV);
        setDisable(CheckBox);
    // allLevelDIV.on('click', function(e) {
    //   // Init
    //   var isLastLevel    = $(this).closest(".levelDIV").find("div").length > 0 ;
    //   var nullCheck      = $(e.currentTarget).children('.levelDIV').find(':checked').length < 1;
    //   var thisChildCkeck = $(e.currentTarget).children('.check-box').find(':checkbox');
    //   // Function
    //   e.target.checked ? ( isLastLevel ? thisChildCkeck.prop('checked' ,true) : null ) : 
    //   ( isLastLevel && nullCheck ? thisChildCkeck.prop('checked', false) : null) ; 
    // });

    // CheckBox.on('click', function(event) {
    //   // Init
    //   var isLastLevel    = $(this).closest(".levelDIV").find("div").length > 0 ;
    //   var thisChildCkeck = $(this).closest(".levelDIV").find(":checkbox");
    //   // Function
    //   !this.checked ? ( isLastLevel ? thisChildCkeck.prop('checked', false) : null ) : 
    //   ( isLastLevel ? thisChildCkeck.prop('checked', true) : null) ;
    //   isAllChecked();
    // });

    $(".div-checkbox label,.all-checked").hover(function() {
      if(!$(this).children("input[type='checkbox']").hasClass('disabled') || !$(this).children("input[type='checkbox']").hasClass('readonly')  ){
        $(this).children("span.ui-checkbox").addClass('hover');        
      }

    }, function() {
      $(this).children("span.ui-checkbox").removeClass('hover');
    });
    
    //e.currentTarget e.target
    //从下往上选择
    allLevelDIV.on('click', function(e) {
      if(e.target.checked){
        if(e.currentTarget != $(e.target).parents(".levelDIV").get(0)){
          var levelLen = $(e.currentTarget).children('.levelDIV').length;
          $(e.currentTarget).children('p.check-box').find('input:checkbox').not(":disabled").prop('checked' ,true)
          .closest('p.check-box').find('span.ui-checkbox').addClass('active');
        }        
      }else{
        if (e.currentTarget != $(e.target).parents(".levelDIV").get(0) && $(e.currentTarget).children('.levelDIV').find('input:checked').length < 1) {
          $(e.currentTarget).children('p').find('input:checkbox').not(":disabled").prop('checked', false)
          .closest('p.check-box').find('span.ui-checkbox').removeClass('active');
        }
      }
    });
    //从上往下选择
    CheckBox.on('click', function(event) {
      if (!this.checked ) {
        if($(this).closest(".levelDIV").find("div").length > 0){
          $(this).closest(".levelDIV").find("input:checkbox").not(":disabled").prop('checked', false)
          .closest('p.check-box').find('span.ui-checkbox').removeClass('active');
        }else{
          $(this).prev('span.ui-checkbox').removeClass('active');
        }
        //event.stopPropagation();
      } else {
        if($(this).closest(".levelDIV").find("div").length > 0){
          $(this).closest(".levelDIV").find("input:checkbox").not(":disabled").prop('checked', true)
          .closest('p.check-box').find('span.ui-checkbox').addClass('active');  
        }else{
          $(this).prev('span.ui-checkbox').addClass('active');
        }
      }
      isAllChecked();
    });

});

$(window).load(function() {
  $(".all-checkbox").css("visibility" , "visible");  
});
</script>

</body>
</html>
赞 ()
下载

转载请注明来源：bootstrap+jquery多级checkbox复选框选中代码

本文永久链接地址：https://www.moyouyouw.cn/code/609.html

郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。

这世上无忧无虑的人，反而相对寿命会长点。

本文关键字： bootstrap复选框

已有 位小伙伴发表了看法

欢迎 你 发表评论

  • 匿名发表
栏目分类
标签云
jquery插件 vue插件 css3插件 动画 js插件 bootstrap插件 表单 图表和图像 菜单和导航 UI框架 文本 布局 时间和日期 拖拽 图像 弹出层 幻灯片和轮播图 滚动 图片展示 滑块和旋转 表格 加载 提示工具 灯箱 选择框 文件树 Tabs 悬停 放大镜和缩放 上传 拾色器 搜索 对话框 表单验证 视频音频 手风琴 登陆和注册 canvas 筛选及排序 输入 分页 标签 触摸 垂直导航 倒计时 自动完成 绘图 密码 评分 水平导航

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系站长删除，谢谢！ 寻找帝国cms模板首选帝国模板之家，用心做站，上线至今广受好评，值得信赖！

  • 交流群1：帝国cms交流群1
  • 交流群2：帝国cms交流群2
在线QQ 给我留言