Checkbox filter

By City, Age , Job

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-3">

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

		  		<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><br>

				<button id="reset">Reset</button>

			</div>


	  	</div>

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

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

	  		<div class="checkbox">
				<label>
				  <input type="checkbox" class="age" 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>

	  		</div>

	  </div>

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

	  	<strong><li>Job:</li></strong>

	  	<div class="checkbox">

	  		<label>
			  <input type="checkbox" class="job" value="Worker">Worker
			</label><br>

			<label>
			  <input type="checkbox" class="job" value="Student">Student
			</label><br>

	  	</div>


	  </div>   
		


		  
		  <table...

JavaScript

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

    $(".kraj,.job").on("change", function () {
        var kraj = $(".kraj:checked").map(function () {
            return $(this).val()
        }).get();
        var job = $(".job:checked").map(function () {
            return $(this).val()
        }).get();
        
        var all = $("tbody tr").hide();
        var professions = $(".profession").filter(function () {
            var profession = $(this).text(),
            	index2 = $.inArray(profession, job);
            	return index2 >=0
        }).parent()
        if (!professions.length) professions = all
        var cities = $(".city").filter(function () {
            var city = $(this).text(),
                index = $.inArray(city, kraj);
                
            return index >= 0
        }).parent()
        if (!cities.length) cities = all
        
        professions.filter(cities).show()
        
        console.log(professions,cities)

    }).first().change()
});