jjcatulle · June 4, 2022 21:33 · Jun 4, 2022
diff --git a/checkbox-multi-filter.markdown b/checkbox-multi-filter.markdown
@@ -0,0 +1,7 @@
+Checkbox Multi Filter
+---------------------
+
+
+A [Pen](https://codepen.io/jean-catulle/pen/qBxyZYz) by [Jean Catulle](https://codepen.io/jean-catulle) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/qBxyZYz).
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<div class="flowers-wrap">
+  <p><strong>Filter flowers by colour:</strong></p>
+  <form>
+    <label><input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label><br>
+    <label><input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label><br> 
+    <label><input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label><br>                     
+    <label><input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label><br>
+    <label><input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label><br>  
+    <label><input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
+  </form>
+  <p><strong>Filter flowers by size:</strong></p>
+  <form>
+    <label><input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label><br>
+    <label><input type="checkbox" name="fl-size" value="small" id="small" /> Small</label><br>
+    <label><input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label><br> 
+    <label><input type="checkbox" name="fl-size" value="large" id="large" /> Large</label><br>
+    <label><input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
+  </form>  
+  <p><strong>Filter flowers by continents:</strong></p>
+  <form>
+    <div><input type="checkbox" name="fl-cont" value="africa" id="africa" /> Africa </div>
+    <div><input type="checkbox" name="fl-cont" value="europe" id="europe" />
+    Europe</div>
+    <div><input type="checkbox" name="fl-cont" value="asia" id="asia" />
+    Asia</div>
+    <div><input type="checkbox" name="fl-cont" value="north-america" id="north-america" />
+    North America</div>
+    <div><input type="checkbox" name="fl-cont" value="south-america" id="south-america" />
+    South America </div>
+    <label><input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" />
+    Antarctica</label>    
+    <div><input type="checkbox" name="fl-cont" value="australasia" id="australasia" />
+    Australasia</div>               
+  </form>
+</div>
+
+<div class="flowers">
+  <div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div>
+  <div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
+  <div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
+  <div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>  
+  <div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>  
+  <div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>  
+  <div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>  
+  <div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div> 
+  <div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div> 
+  <div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div> 
+  <div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>  
+  <div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>  
+  <div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>  
+  <div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>                 	
+</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+var $filterCheckboxes = $('input[type="checkbox"]');
+var filterFunc = function() {
+
+  var selectedFilters = {};
+
+  $filterCheckboxes.filter(':checked').each(function() {
+
+    if (!selectedFilters.hasOwnProperty(this.name)) {
+      selectedFilters[this.name] = [];
+    }
+
+    selectedFilters[this.name].push(this.value);
+  });
+
+  // create a collection containing all of the filterable elements
+  var $filteredResults = $('.flower');
+
+  // loop over the selected filter name -> (array) values pairs
+  $.each(selectedFilters, function(name, filterValues) {
+
+    // filter each .flower element
+    $filteredResults = $filteredResults.filter(function() {
+
+      var matched = false,
+        currentFilterValues = $(this).data('category').split(' ');
+
+      // loop over each category value in the current .flower's data-category
+      $.each(currentFilterValues, function(_, currentFilterValue) {
+
+        // if the current category exists in the selected filters array
+        // set matched to true, and stop looping. as we're ORing in each
+        // set of filters, we only need to match once
+
+        if ($.inArray(currentFilterValue, filterValues) != -1) {
+          matched = true;
+          return false;
+        }
+      });
+
+      // if matched is true the current .flower element is returned
+      return matched;
+
+    });
+  });
+
+  $('.flower').hide().filter($filteredResults).show();
+}
+
+$filterCheckboxes.on('change', filterFunc);  
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,31 @@
+body {
+  font-family:'Arial';
+  color:#646464;
+}		
+.continents-wrap {
+  float:left;
+  width:20%;
+  margin:0 5% 0 0;
+  padding:0;
+}		
+.flowers-wrap {
+  float:left;
+  width:20%;
+  margin:0 5% 0 0;
+  padding:0;
+  position:relative;
+}	
+.flowers {
+  float:left;
+  width:50%;
+}
+.flowers div {
+  float:left;
+  width:90%;
+  height:68px;
+  line-height:68px;
+  padding:0 5%;
+  background:#eee;
+  margin:0 0 1px;
+  position:relative;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
No results found