Geek Answers Handbook

How to show or hide div inside container based on CheckBox selection

I'm trying to show values ​​based on checkbox check and uncheck

For example, if the Show all maths check box is selected , I want to display all the package panels for which math is selected

Similarly, if the Show all physics check box is selected , I want to display all the package panels for which Physiscs is selected

I tried it like this

$(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); }); });

But this does not work as expected

This is my violin

http://jsfiddle.net/cod7ceho/135/

Could you tell me how to fix this?

+8
jquery
source share
3 answers

You can try something like this.

 $(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>

I changed the layout a bit to look up the selection of checkboxes at the top of the panel inside the panel.

Changed the code to accommodate both the OR and AND conditions. This should solve your problem.

+7
source share

try this short code

 $('.actions input').on('change', function () { if ($('.actions input:checked').length <= 0) $(".pack-panel").show(); else { $(".pack-panel").show(); $('.actions input:checked').each(function () { var cclass = $(this).attr('class').split('filter')[1] + "checkbox"; $('.' + cclass).each(function () { if(!$(this).prop('checked')){ $(this).parents('.pack-panel').hide(); } }); }); } });
+4
source share
 var fields = ['maths', 'physics', 'chemistry']; var visible = {}; $('.actions input').on('change', function(){ var atLeastOne = false; for(var field of fields){ visible[field] = false; if($('.filter' + field).prop('checked')){ visible[field] = true; atLeastOne = true; } } if(!atLeastOne){ $(".pack-panel").show(); }else{ $(".pack-panel").hide(); for(var field of fields){ if(!visible[field]){ continue; } $(".pack-panel").each(function () { if($(this).is(':visible')) { return; } if($(this).find('.'+field+'checkbox').prop('checked')){ $(this).show(); return; } }); } } });
+1
source share

More articles:


All Articles