checkbox filter, City, Age

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="row">
		  	<div class="col-xs-4">

		  		<strong><li>City:</li></strong>

		  		<div class="checkbox" id="filter">
				<label>
				  <input type="checkbox" class="kraj" value="New York" id="dasdasdasda">New York
				</label><br>

				<label>
				  <input type="checkbox" class="kraj" value="San Francisco" id="das2222dasdasda">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><br>
                <button id="reset">Reset</button>
				

			</div>


	  	</div>

	  	<div class="col-xs-4">

	  		<strong><li>Age:</li></strong>

	  		<div class="checkbox">
				<label>
				  <input type="checkbox" class="age" id="test1" value="">14-20
				</label><br>

				<label>
				  <input type="checkbox" class="age" value="">20-30
				</label><br>

				<label>
				  <input type="checkbox" class="age" value="">30-40
				</label><br>

				<label>
				  <input type="checkbox" class="age" value="">40-50
				</label><br>

				<label>
				  <input type="checkbox" class="age" value="">50-60
				</label><br>

				<label>
				  <input type="checkbox" class="age" value="">60-70
				</label><br><br>
                    
                    

	  		</div>

	  </div>   
		


		  
		  <table class="table table-striped" id="tabela1">
		    <thead>
		      <tr>
		        <th>#</th>
		        <th>Firstname</th>
		        <th>Lastname</th>
		        <th>City</th>
		       ...

JavaScript

$(document).ready(function () {
	
	$("#reset").click(function(){
        $("tbody tr").show();
        $( "input:checkbox:checked" ).prop( "checked", false );
    });
    $(".kraj,.age").on("change", function () {

        var kraj = $(".kraj:checked").map(function () {
            return $(this).val()
        })
        var age = $(".age:checkbox:checked").map(function () {
            return this.nextSibling.nodeValue.trim()
        })
        console.log(age,kraj)
        $("tbody tr").hide();
        var cities = $(".city").filter(function () {
            var city = $(this).text(),
                index = $.inArray(city, kraj);
            return index >= 0
        }).parent().show();
    }) 
});