JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<main>
 <fieldset id="genres" data-filter-key='Genres'>
  <legend>Genrefilter</legend>
  <label><input type="checkbox" value='Science Fiction'> Science Fiction</label>
  <label><input type="checkbox" value='Action'> Action</label>
  <label><input type="checkbox" value='Fantasy'> Fantasy</label>
 </fieldset>
 <fieldset id="tags" data-filter-key='Tags'>
  <legend>Tags</legend>
  <label><input type="checkbox" value='Schnulze'> Schnulze</label>
  <label><input type="checkbox" value='Star Trek'> Star Trek</label>
  <label><input type="checkbox" value='Harrison Ford'> Harrison Ford</label>
 </fieldset>
</main>
<button id="anzeigen">Zeig's mir!</button>
<pre id="filterDebugOutput"></pre>

CSS

main {
  display: flex;
}
label {
  display: block;
}

JavaScript

class CheckboxController {

   constructor() {
   	this.filters = {};
   }
   
   watch(containerId) {
		const container = document.getElementById(containerId);
    const key = container.dataset.filterKey;
		container.addEventListener("change", (event) => {
			const keySet = container.querySelectorAll(`input[type=checkbox]:checked`);
      this.filters[key] = Array.prototype.map.call(keySet, checkbox => checkbox.value);
		});
  }
}

controller = new CheckboxController();
controller.watch("genres");
controller.watch("tags");

const debugOut = document.getElementById("filterDebugOutput")
document.getElementById("anzeigen").addEventListener("click", function() {
   debugOut.textContent = JSON.stringify(controller.filters, null, 3);
})