title: Filter table with Bootstrap "checkbox"-Buttons
body: <p>I have a table which I want to filter with bootstrap checkbox buttons. The table is filled out of an array. So for example I want only to show rows with <code>"model"=BMW 1er</code>. How do I have to connect the button and how do I have to do the filter script?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;test&lt;/title&gt;
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
          &lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;libraries=geometry"&gt;&lt;/script&gt;
          &lt;br&gt;
          &lt;div class="btn-group" data-toggle="buttons"&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;BMW 1er&lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;BMW Active E&lt;/label&gt;
              &lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;BMW 1er Cabrio&lt;/label&gt;
              &lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;BMW X1&lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;MINI&lt;/label&gt;
              &lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;MINI Clubman&lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;MINI Coupé&lt;/label&gt;
              &lt;label class="btn btn-primary"&gt;
                  &lt;input type="checkbox"&gt;MINI Cabrio&lt;/label&gt;
          &lt;/div&gt;
          &lt;br&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  &lt;font size="1"&gt; 
  &lt;br&gt;
  &lt;table class="table table-condensed" border="1" id="usertable"&gt;&lt;/table&gt;
  &lt;/font&gt;
  
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;div class="alert alert-success"&gt; &lt;a href="#" class="alert-link"&gt;Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld!&lt;/a&gt;
  
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  function callJSON() {
                      setTimeout(function() {
                          $.getJSON('./url.php', function(data) {
                              $("#usertable").empty();
                              var cars = data.rec.vehicles.vehicles;
                              //cars.sort(function(el1,el2){ return el1.model == el2.model ? 0 : (el1.model &lt; el2.model ? -1 : 1); });
                              cars.sort(function(el1, el2) {
                                  if (el1.model == el2.model) {
                                      if (el1.fuelState == el2.fuelState) {
                                          return 0;
                                      } else if (el1.fuelState &lt; el2.fuelState) {
                                          return -1;
                                      } else {
                                          return 1;
                                      }
                                  } else if (el1.model &lt; el2.model) {
                                      return -1;
                                  } else {
                                      return 1;
                                  }
                              });
                              $.each(cars, function(key, data) {
                                  var laenge = cars.length;
                                  var vint = data.vin;
                                  var positionA = new google.maps.LatLng(data.position.latitude, data.position.longitude);
                                  var posiitonB = new google.maps.LatLng(48.1351253, 11.5819806);
                                  var entfernung = google.maps.geometry.spherical.computeDistanceBetween(positionA, posiitonB);
                                  var entfernung1 = (entfernung / 1000);
                                  var entfernung2 = entfernung1.toFixed(2);
                                  var entfernung3 = entfernung2 + " Km";
                                  console.log(entfernung2);
                                  console.log(positionA);
                                  console.log(posiitonB);
                                  var coopers = "";
                                  var tanken = "";
                                  var drive = "MAN";
                                  var fuelfarbe = "#01DF3A";
                                  var prozent = "%";
                                  var kosten = " 31 Cent/Min "
                                  var tanksymbol = "glyphicon-tint";
                                  var farbe = "success";
                                  var flugbadge = "";
                                  var mode = "&amp;dirflg=w";
                                  var kraftstoff = "BENZIN";
                                  var ortbadge = "glyphicon-map-marker";
                                  var entfernungsbadge = "glyphicon-resize-horizontal";
                                  var krafts = " (" + data.fuelState + "%)";
                                  var strasse = data.address;
                                  var v = vint.substring(3, 7);
                                  var pdf = vint.substring(10, 17);
                                  var pdf1 = pdf + ".pdf";
                                  console.log(pdf);
                                  if (data.fuelType == "DDE") {
                                      kraftstoff = "DIESEL";
                                  }
                                  if (v == "SX31") {
                                      coopers = " S";
                                  }
                                  if (v == "SW71") {
                                      coopers = " SD";
                                  }
                                  if (data.model == "BMW ActiveE ") {
                                      tanksymbol = "glyphicon-flash";
                                      kraftstoff = "STROM";
                                  }
                                  if (data.model == "BMW X1 ") {
                                      kosten = " 34 Cent/Min ";
                                  }
                                  if (data.auto == "Y") {
                                      drive = "AUT";
                                  }
                                  if ((48.347910654607695 &lt; data.position.latitude &amp;&amp; data.position.latitude &lt; 48.35988839686733) &amp;&amp; (11.781678199768066 &lt; data.position.longitude &amp;&amp; data.position.longitude &lt; 11.792492866516113)) {
                                      flugbadge = "&lt;span class='badge'&gt;+12€&lt;/span&gt;";
                                      ortbadge = "glyphicon-plane";
                                  }
                                  if (data.fuelState &lt;= 25) {
                                      tanken = "20 Freiminuten für Vollbetankung";
                                      farbe = "warning";
                                  }
                                  if (data.position.latitude == "0") {
                                      entfernung3 = "NaN";
                                      strasse = "Nicht lokalisierbar";
                                      farbe = "active";
                                  }
                                  $('#usertable').append(
  
                                  function() {
                                      return "&lt;tr class=" + farbe + "&gt;" +
                                          "&lt;td&gt;" + data.model + coopers + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;span class='glyphicon glyphicon-user'&gt;&lt;/span&gt; " + data.carName + "&lt;/td&gt;" +
                                      //"&lt;td&gt;&lt;span class='glyphicon glyphicon-time'&gt;&lt;/span&gt; "+dur+"&lt;/td&gt;"+
                                      "&lt;td&gt;" + drive + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;span class='glyphicon " + tanksymbol + "'&gt;&lt;/span&gt;" + kraftstoff + krafts + "&lt;/td&gt;" +
                                          "&lt;td&gt;" + data.licensePlate + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;span class='glyphicon " + ortbadge + "'&gt;&lt;/span&gt; " + strasse + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;span class='glyphicon " + entfernungsbadge + "'&gt;&lt;/span&gt; " + entfernung3 + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;span class='glyphicon glyphicon-euro'&gt;&lt;/span&gt;" + kosten + flugbadge + "&lt;/td&gt;" +
                                          "&lt;td&gt;" + laenge + "&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;a href='https://de.drive-now.com/php/metropolis/vehicle_details?vin=" + data.vin + "'target='_blank'&gt;&lt;button class='btn btn-success btn-xs' type='button'&gt;Reservieren&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;a href='http://maps.google.de/maps?saddr=" + posiitonB + "&amp;daddr=" + data.address + mode + "'target='_blank'&gt;&lt;button class='btn btn-danger btn-xs' type='button'&gt;Route&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;" +
                                          "&lt;td&gt;&lt;a href='http://www.bmwarchiv.de/vin/" + pdf1 + "'target='_blank'&gt;&lt;button class='btn btn-danger btn-xs' type='button'&gt;Route&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;" +
  
                                      //"&lt;td&gt;&lt;img src='"+data.model+"1.png'/&gt;&lt;/td&gt;"+
                                      "&lt;tr&gt;";
                                  });
                              })
                          }).always(callJSON);
                      }, 2000);
                  }
                  $(callJSON);
              });
          &lt;/script&gt;
          &lt;script&gt;
              (function(i, s, o, g, r, a, m) {
                  i['GoogleAnalyticsObject'] = r;
                  i[r] = i[r] || function() {
                      (i[r].q = i[r].q || []).push(arguments)
                  }, i[r].l = 1 * new Date();
                  a = s.createElement(o),
                  m = s.getElementsByTagName(o)[0];
                  a.async = 1;
                  a.src = g;
                  m.parentNode.insertBefore(a, m)
              })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
  
              ga('create', 'UA-44913908-2', 'voltdrive.de');
              ga('send', 'pageview');
          &lt;/script&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>