Show / Hide div depending on radio and checkbox buttons exclusively

In this page: http://ift.tt/1s8iXDs I have several filters to display or hide the pictures below.

I have already created a script to show/hide the divs depending on the selection of the first radio button (position). But I cannot figure out how to exclusively program the rest of the selectors (Radio buttons and checkbox).

The result of selecting different fields should be related by an AND condition.

In example: If I select Top and Tank and Melee, the displayed divs should be only the ones with the classes .top, .tank and .melee

Here is the HTML

<div id="selector">
<div id="selectorTitle">Champions filters</div>

<div id="selectorWrapperFirts">
    <div id="selectorSection">Position</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input name="posi" type="radio" value=".top" /> Top</label></div>
        <div id="buttonWrapper"><label><input name="posi" type="radio" value=".jungle" /> Jungle</label></div>
        <div id="buttonWrapper"><label><input name="posi" type="radio" value=".mid" /> Mid</label></div>
        <div id="buttonWrapper"><label><input name="posi" type="radio" value=".bot" /> Bot</label></div>
    </div>
</div>

<div id="selectorWrapper">
    <div id="selectorSection">Role</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Assassin" /> Assassin</label></div>
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Fighter" /> Fighter</label></div>
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Marksman" /> Marksman</label></div>
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Mage" /> Mage</label></div>
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Support" /> Support</label></div>
        <div id="buttonWrapper"><label><input name="role" type="radio" value=".Tank" /> Tank</label></div>
    </div>
</div>

<div id="selectorWrapper">
    <div id="selectorSection">Damage Type</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input name="dmg" type="radio" value=".AD" /> AD</label></div>
        <div id="buttonWrapper"><label><input name="dmg" type="radio" value=".AP" /> AP</label></div>
        <div id="buttonWrapper"><label><input name="dmg" type="radio" value=".Hybrid" /> Hybrid</label></div>
    </div>
</div>

<div id="selectorWrapper">
    <div id="selectorSection">Power Spike</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input name="powers" type="radio" value=".egame" /> Early game</label></div>
        <div id="buttonWrapper"><label><input name="powers" type="radio" value=".mgame" /> Mid game</label></div>
        <div id="buttonWrapper"><label><input name="powers" type="radio" value=".lgame" /> Late game</label></div>
    </div>
</div>

<div id="selectorWrapper">
    <div id="selectorSection">Skill Ceiling</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input name="skill" type="radio" value=".Low" /> Low</label></div>
        <div id="buttonWrapper"><label><input name="skill" type="radio" value=".Normal" /> Normal</label></div>
        <div id="buttonWrapper"><label><input name="skill" type="radio" value=".High" /> High</label></div>
        <div id="buttonWrapper"><label><input name="skill" type="radio" value=".Vhigh" /> Very High</label></div>
    </div>
</div>

<div id="selectorWrapperLast">
    <div id="selectorSection">Qualities</div>
    <div id="selectorContent">
        <div id="buttonWrapper"><label><input type="checkbox" value=".Ranged" /> Ranged</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Melee" /> Melee</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Crowd-Control" /> Crowd Control</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Engage" /> Engage</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Disengage" /> Disengage</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Counter-Engage" /> Counter engage</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Jungle-Clear" /> Jungle clear</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Burst" /> Burst</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Peel" /> Peel</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Poke" /> Poke</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Scape" /> Scape</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Siege" /> Siege</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Splitpush" /> Splitpush</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Sustain" /> Sustain</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Teamfight" /> Teamfight</label></div>
        <div id="buttonWrapper"><label><input type="checkbox" value=".Wave-Clear" /> Wave clear</label></div>
    </div>
</div>

<div id="resetCheckboxesDiv">
    <button id="resetCheckboxes">Reset</button>
</div>
</div>

This is how the pictures HTML look. Notice the different classes that regulate the filters:

<div class="item  Melee Crowd-Control Engage  Counter-Engage Jungle-Clear Burst  Scape  Splitpush Sustain    Normal egame  Fighter    Tank Hybrid top jungle  ">
    <a href="aatrox">
        <img class="champavatar2" src="/icon/champions/aatrox.png" alt="">
        <div class="textavatar">Aatrox</div> 
    </a>
</div>

<div class="item Ranged  Crowd-Control Engage  Counter-Engage  Burst Poke Scape Siege  Sustain Teamfight Wave-Clear  High mgame Assassin   Mage   AP   mid ">
    <a href="ahri">
        <img class="champavatar2" src="/icon/champions/ahri.png" alt="">
        <div class="textavatar">Ahri</div> 
    </a>
</div>

<div class="item  Melee      Burst  Scape  Splitpush Sustain    Normal lgame Assassin Fighter     Hybrid top  mid ">
    <a href="akali">
        <img class="champavatar2" src="/icon/champions/akali.png" alt="">
        <div class="textavatar">Akali</div> 
    </a>
</div>

<div class="item  Melee Crowd-Control Engage Disengage Counter-Engage    Scape   Sustain Teamfight  Peel High lgame  Fighter   Support Tank AP    bot">
    <a href="alistar">
        <img class="champavatar2" src="/icon/champions/alistar.png" alt="">
        <div class="textavatar">Alistar</div> 
    </a>
</div>

Here is the JS that I managed to create for the first radio selector:

$('input[name=posi]').click(function() {
    if( $('input[name=posi]:checked').val() == '.top' ) {
        $('.top').show(); 
        $('.jungle').hide();   
        $('.mid').hide();   
        $('.bot').hide();   
    }
    else if ( $('input[name=posi]:checked').val() == '.jungle' ) {
        $('.top').hide();   
        $('.jungle').show();   
        $('.mid').hide();   
        $('.bot').hide();   
    }
    else if ( $('input[name=posi]:checked').val() == '.mid' ) {
        $('.top').hide();  
        $('.jungle').hide();   
        $('.mid').show();   
        $('.bot').hide();   
    }
    else if ( $('input[name=posi]:checked').val() == '.bot' ) {
        $('.top').hide();   
        $('.jungle').hide();   
        $('.mid').hide();   
        $('.bot').show();  
    }
});

I am a bit new to javascript so any help is highly appreciated. Thank you very much in advance.