jQuery多级复选框checkbox选中

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。<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>

4、书写css代码。<style>.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; }.title { overflow: hidden; text-align: center; border-top: 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-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; }.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; }</style>

5、书写并添加js代码。<script src="js/jquery.min.js"></script><script>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")){ var IsLevelTwo = _this_.closest(".all-checkbox").hasClass('level-two'); var hei = _this_; 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(); 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); }; } }); } 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); $(".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'); }); 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'); } } 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>

6、代码整体结构。

7、查看效果。