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

网页特效

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

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

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

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

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>
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

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

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

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