juan fran juan fran - 2 years ago 102
Javascript Question

Show / Hide div depending on radio and checkbox buttons

In this page: http://www.metagame.gg/champions/ 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 radio buttons, but it only works when the 5 options are selected. Furthermore, I cannot figure out how to exclusively program the checkboxes.

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 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 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 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 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 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 id="resetCheckboxesDiv">
<button id="resetCheckboxes">Reset</button>

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>

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

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

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

Here is the JS that I managed to create. I insist that it only works when an option of each 5 radio buttons is selected.

$('#selector input').click(function() {
var position = $('input[name=posi]:checked').val();
var role = $('input[name=role]:checked').val();
var dmg = $('input[name=dmg]:checked').val();
var powers = $('input[name=powers]:checked').val();
var skill = $('input[name=skill]:checked').val();

var selected = position + role + dmg + powers + skill;
$('.item' + selected).show();
$("#selector input").removeAttr("checked");

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

Answer Source

I didn't tryed and tested your code... I have to admit.
But as a first quick read of your js, I clearly see that you define vars based on their "checked" attribute. There is a hole when none is checked on a specific name input. The result is probably and "undefined" var. Did you checked the console results?

I'm sure it would be a great idea to set defaults values!

Something like this:

$('#selector input').click(function() {
    if ( $( elem ).is( ":checked" ) ){
        // Your var definition
        // Define a default value !

Do this for each.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download