Filtr data by choosing a checkboxes - problem with function

Filtr data by choosing a checkboxes - problem with function

Hello everyone.
I am new in jQuery and I need some help with my script.
I want to filtr data by choosing a checkboxes.

3 step choosing menu.

1st step - fuel: diesel , petrol
2nd step - brand: audi , seat , skoda , vw
3rd step - doors: 2a3 , 4a5

For example, if I choose diesel and vw, script shows me divs with Passat and Golf, if I want all petrol 2/3-doors cars it's shows me Seat Ibiza, etc.

Code:

Inputs:

  1. <input type="checkbox" name="fuel" value="diesel" id="diesel" /><label for="diesel">diesel</label><br />
  2. <input type="checkbox" name="fuel" value="petrol" id="petrol" /><label for="petrol">petrol</label><br />
  3. <br />
  4. <input type="checkbox" name="brand" value="audi" id="audi" /><label for="audi">audi</label><br />
  5. <input type="checkbox" name="brand" value="seat" id="seat" /><label for="seat">seat</label><br />
  6. <input type="checkbox" name="brand" value="skoda" id="skoda" /><label for="skoda">skoda</label><br />
  7. <input type="checkbox" name="brand" value="vw" id="vw" /><label for="vw">vw</label><br />
  8. <br />
  9. <input type="checkbox" name="doors" value="d2a3" id="d2a3" /><label for="d2a3">2a3</label><br />
  10. <input type="checkbox" name="doors" value="d4a5" id="d4a5" /><label for="d4a5">4a5</label><br />

Divs:

  1. <div class="fuel-diesel brand-audi d2a3">Audi A3 Diesel</div>
  2. <div class="fuel-petrol brand-audi d4a5">Audi A4 Petrol</div>
  3. <div class="fuel-petrol brand-seat d4a5">Seat Leon Petrol</div>
  4. <div class="fuel-diesel brand-vw d4a5">VW Passat Diesel</div>
  5. <div class="fuel-diesel brand-vw d4a5">VW Golf Diesel</div>
  6. <div class="fuel-diesel brand-skoda d2a3">Skoda Fabia Diesel</div>
  7. <div class="fuel-diesel brand-skoda d4a5">Skoda Octavia Diesel</div>
  8. <div class="fuel-petrol brand-seat d2a3">Seat Ibiza Petrol</div>


And JS, I know it's looks terrible :-/ and don't working good:

  1.     $(document).ready(
  2.     function()
  3.     {
  4.         //fuel
  5.         $("#diesel").click(function()
  6.         {
  7.             $(".fuel-petrol").fadeOut("normal");
  8.             $(".fuel-diesel").fadeIn("normal");
  9.         });
  10.         $("#petrol").click(function()
  11.         {
  12.             $(".fuel-diesel").fadeOut("normal");
  13.             $(".fuel-petrol").fadeIn("normal");
  14.         });
  15.        
  16.         //brand
  17.         $("#audi").click(function()
  18.         {
  19.             $(".brand-audi").show("normal");
  20.             $(".brand-seat").hide("normal");
  21.             $(".brand-skoda").hide("normal");
  22.             $(".brand-vw").hide("normal");
  23.         });
  24.         $("#seat").click(function()
  25.         {
  26.             $(".brand-audi").hide("normal");
  27.             $(".brand-seat").show("normal");
  28.             $(".brand-skoda").hide("normal");
  29.             $(".brand-vw").hide("normal");
  30.         });
  31.         $("#skoda").click(function()
  32.         {
  33.             $(".brand-audi").hide("normal");
  34.             $(".brand-seat").hide("normal");
  35.             $(".brand-skoda").show("normal");
  36.             $(".brand-vw").hide("normal");
  37.         });
  38.         $("#vw").click(function()
  39.         {
  40.             $(".brand-audi").hide("normal");
  41.             $(".brand-seat").hide("normal");
  42.             $(".brand-skoda").hide("normal");
  43.             $(".brand-vw").show("normal");
  44.         });
  45.        
  46.     });
   
Anyone have idea how to function should look like?