Checkbox filter

by Akram kamal

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
 
<div class="container">
  <h2>Table</h2>    
<div class="checkbox" id="filter">
	<label>
	  <input type="checkbox" class="kraj" value="New York">New York
	</label><br>

	<label>
	  <input type="checkbox" class="kraj" value="San Francisco">San Francisco
	</label><br>

	<label>
	  <input type="checkbox" class="kraj" value="Dallas">Dallas
	</label><br>

	<label>
	  <input type="checkbox" class="kraj" value="Los Angeles">Los Angeles
	</label><br>

	<label>
	  <input type="checkbox" class="kraj" value="Chicago">Chicago
	</label><br>

	<label>
	  <input type="checkbox" class="kraj" value="Philadelphia">Philadelphia
	</label><br>

</div>                  
	  
	  <table class="table table-striped" id="tabela1">
	    <thead>
	      <tr>
	        <th>#</th>
	        <th>Firstname</th>
	        <th>Lastname</th>
	        <th>City</th>
	        <th>Age</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr>
	        <td>1</td>
	        <td>Anna</td>
	        <td>Brown</td>
	        <td class="city">New York</td>
	        <td>25</td>
	      </tr>
	      <tr>
	        <td>2</td>
	        <td>Mark</td>
	        <td>Webber</td>
	        <td class="city">San Francisco</td>
	        <td>24</td>
	      </tr>
	      <tr>
	        <td>3</td>
	        <td>Mike</td>
	        <td>Hoffman</td>
	        <td class="city">Dallas</td>
	        <td>22</td>
	      </tr>
	      <tr>
	        <td>4</td>
	        <td>Julie</td>
	        <td>Wisher</td>
	        <td class="city">Los Angeles</td>
	        <td>45</td>
	      </tr>
	      <tr>
	        <td>5</td>
	        <td>Thomas</td>
	        <td>Ford</td>
	        <td class="city">Chicago</td>
	        <td>64</td>
	      </tr>
	      <tr>
	        <td>6</td>
	        <td>Lucy</td>
	        <td>Dawn</td>
	        <td class="city">Philadelphia</td>
	       ...

JavaScript

$(document).ready(function () {

    $("input:checkbox").on("change", function () {
        var a = $("input:checkbox:checked").map(function () {
            return $(this).val()
        }).get()
        $("#tabela1 tr").hide();
        var cities = $(".city").filter(function () {
            var city = $(this).text(),
                index = $.inArray(city, a);
            return index >= 0
        }).parent().show();
    }).first().change()
});