大佬教程收集整理的这篇文章主要介绍了jquery – 如何根据CheckBox选择显示或隐藏Container内的div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
例如,如果选择了“显示所有数学复选框”,我想显示所有选择了数学的包面板
同样,如果选择了Show All Physics checkBox,我想显示选择了Physiscs的所有包面板
我试过这种方式
$(document).on('change','.filtermaths',function() { $(".pack-panel").each(function () { var visible = $(this).find('.mathscheckBox').prop('checked') $(this).toggle(visiblE); }); }); $(document).on('change','.filterphysics',function() { $(".pack-panel").each(function () { var visible = $(this).find('.physicscheckBox').prop('checked') $(this).toggle(visiblE); }); }); $(document).on('change','.filterchemistry',function() { $(".pack-panel").each(function () { var visible = $(this).find('.chemistrycheckBox').prop('checked') $(this).toggle(visiblE); }); });
但这不符合预期
这是我的小提琴
$(document).on("change",".actions",function(event) { if ($("input[name='includeAll']:checked").val() === "OR") { if ($("input:checked",$(".actions")).length === 0) { $(".pack-panel").addClass("visible").removeClass("hidden"); } else { $(".pack-panel").addClass("hidden"); } $("input:checked",$(".actions")).each(function() { var $target = $(this); var ischecked = $target.prop("checked"); var value = $target.data("course-flag"); if (ischecked) { $("." + value + "-checkBox:checked").closest(".pack-panel").addClass("visible").removeClass("hidden"); } }); } else { var SELEctedCourses = []; $("input:checked",$(".actions")).each(function() { SELEctedCourses.push($(this).data("course-flag")); }); SELEctAll(SELEctedCourses); } }); function SELEctAll(courses) { $(".pack-panel").each(function() { var $panel = $(this); var allSELEcted = true; courses.forEach(function(coursE) { if ($panel.find("." + course + "-checkBox:checked").length === 0) { allSELEcted = false; } }); if (allSELEcted) { $panel.addClass("visible").removeClass("hidden"); } else { $panel.removeClass("visible").addClass("hidden"); } }); }
.visible { display: block; } .hidden { display: none; }
<link href="https://cdnjs.cloudFlare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="radio" value="AND" name="includeAll" checked/>AND </label> <label> <input type="radio" value="OR" name="includeAll" />OR </label> <div class="row"> <div class="col-lg-9 actions"> <label class="mt-checkBox mt-checkBox-outline"> <input class="filtermaths" data-course-flag="maths" type="checkBox">Show All Maths<span></span> </label> <label class="mt-checkBox mt-checkBox-outline"> <input class="filterphysics" type="checkBox" data-course-flag="physics">Show All Physics<span></span> </label> <label class="mt-checkBox mt-checkBox-outline"> <input class="filterchemistry" type="checkBox" data-course-flag="chemistry">Show All Chemistry<span></span> </label> </div> <hr> <div class="sortable col-lg-12" id="pacstable"> <div class="portlet portlet-sortable light bordered pack-panel"> <div class="portlet-title"> <div class="row"> <div class="col-md-7"> <div class="packdtsl"> <div class="packimg"></div> <ul> <li> <span class="title pac_inner">student Name:</span> <span> <h1 class="studentname">Mark</h1> </span> </li> </ul> </div> </div> <div class="col-md-2"> <div class="packrow"> </div> </div> <div class="col-md-3"> <div class="packrow"> <ul> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="physics-checkBox" value="physics" type="checkBox" checked="">Physics<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="chemistry-checkBox" value="chemistry" type="checkBox" checked="">Chemistry<span></span> </label> </li> </ul> </div> </div> </div> </div> </div> <div class="portlet portlet-sortable light bordered pack-panel"> <div class="portlet-title"> <div class="row"> <div class="col-md-7"> <div class="packdtsl"> <div class="packimg"></div> <ul> <li> <span class="title pac_inner">student Name:</span> <span> <h1 class="studentname">Micheal</h1> </span> </li> </ul> </div> </div> <div class="col-md-2"> <div class="packrow"> </div> </div> <div class="col-md-3"> <div class="packrow"> <ul> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="physics-checkBox" value="physics" type="checkBox" checked="">Physics<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="chemistry-checkBox" value="chemistry" type="checkBox" unchecked="">Chemistry<span></span> </label> </li> </ul> </div> </div> </div> </div> </div> <div class="portlet portlet-sortable light bordered pack-panel"> <div class="portlet-title"> <div class="row"> <div class="col-md-7"> <div class="packdtsl"> <div class="packimg"></div> <ul> <li> <span class="title pac_inner">student Name:</span> <span> <h1 class="studentname">Roger</h1> </span> </li> </ul> </div> </div> <div class="col-md-2"> <div class="packrow"> </div> </div> <div class="col-md-3"> <div class="packrow"> <ul> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="maths-checkBox" value="maths" type="checkBox" checked="">Maths<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="physics-checkBox" value="physics" type="checkBox" unchecked="">Physics<span></span> </label> </li> <li> <label class="mt-checkBox mt-checkBox-outline"> <input class="chemistry-checkBox" value="chemistry" type="checkBox" unchecked="">Chemistry<span></span> </label> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
以上是大佬教程为你收集整理的jquery – 如何根据CheckBox选择显示或隐藏Container内的div全部内容，希望文章能够帮你解决jquery – 如何根据CheckBox选择显示或隐藏Container内的div所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。