Jquery Checkbox Filter, Working But Want To Reset When Unchecked December 20, 2023 Post a Comment I'm building a filter for a selection of condos. I've figured out how to filter using a slider and now also need to filter by number of bedrooms using two checkboxes. Solution 1: You are marking elements that have the data tag bdrms set to 1 as invisible. This does not change. So once they are invisible, they will remain that way.There are several ways to solve this, one being a seperate function that's being called when the checkbox isn't checked:if($(this).is(':checked')){ filterItems(); } else { resetAll(); } CopyAfter that it's a simple matter of writing a function that resets the invisble elements back to visible:function resetAll() { $.each($('.condo-box'), function() { $this = $(this); if($this.is(":hidden")){ $this.show(); } }); } CopySo updating your fiddle would be: https://jsfiddle.net/3y9vz1q1/1/ Which works fine. UPDATE:A far better solution would be to make both checkboxes work and use a single function:Baca JugaWhy Does Preventdefault() On A Parent Element's Click 'disable' A Checkbox?Get All Table Row Values When CheckedBad Quality For 100% Both Width And Height Of Canvas$(document).ready(function() { $("#1bdrm, #2bdrm").click(function() { var bdrm1 = false; var bdrm2 = false; if($("#1bdrm").is(':checked')){ bdrm1 = true; } if($("#2bdrm").is(':checked')){ bdrm2 = true; } filterItems(bdrm1, bdrm2); }); }); function filterItems(bdrm1, bdrm2){ $.each($('.condo-box'), function() { $this = $(this); itemData = $this.data(); if(bdrm1 && !bdrm2){ if(itemData.bdrms == 1){ $this.show(); itemData.matching = true; } else { $this.hide(); itemData.matching = false; } } elseif(bdrm2 && !bdrm1){ if(itemData.bdrms == 2){ $this.show(); itemData.matching = true; } else { $this.hide(); itemData.matching = false; } } else { $this.show(); itemData.matching = true; } }); } CopyFiddle update: https://jsfiddle.net/3y9vz1q1/2/Solution 2: Always, when you click to checkbox, filter funtion started and because last item $('#lawrence').data({id:10,sqft:467,bdrms:1});Copyhas 1, list don't reset Try it: $(document).ready(function() { var theValue; $("#1bdrm").click(function() { if(this.checked){ filterItems(false); }else{ filterItems(true); } }); }); functionfilterItems(reset) { $.each($('.condo-box'), function() { $this = $(this); itemData = $this.data(); if(itemData.bdrms == 1 || reset === true){ $this.show(); itemData.matching = true; } else { $this.hide(); itemData.matching = false; } }); } Copy Share You may like these postsCheck/ Uncheck All Checkbox Of A Html TableHow To Remove Checked Checkbox If All Sub Check Boxes Are Unchecked?Checkbox Unchecking Itself After Angularjs Filter AppliedHow To Use Images For Check Boxes Using Css Or May Be Javascript? Post a Comment for "Jquery Checkbox Filter, Working But Want To Reset When Unchecked"
Post a Comment for "Jquery Checkbox Filter, Working But Want To Reset When Unchecked"