JavaScript不是取消隐藏内容

Question

(I was unsure what title to use so i took what i felt described it if it doesnt fit please tell me/change it)

So i've been making this league of legends site for a while now and ran into a trouble. I've been making a Filter menu that filters the "Champions"(Hero's) to only show those with the correct role/ability.

So i got an on-click script on checkboxes that should show the correct Champions when clicked on. but it doesnt seem to work.

When i uncheck the textbox it correctly takes back all of the champions, but when i "Check" it all champions disappears (should do this) but it doesnt show those wich apply to the filter. (I got all the correct id's on the DIV's, i know this since i have a search bar that works for filtering aswell but i want checkboxes for it since its simpler)

Checkboxes:

    AD<input type="checkbox" name="adcarry" value="adcarry" id="check1" class="check1" onclick="boxchanged()">
    AP<input type="checkbox" name="apcarry" value="apcarry" id="check2" class="check2" onclick="boxchanged()"> 
    Carry<input type="checkbox" name="carry" value="carry" id="check3" class="check3" onclick="boxchanged()">
    Tank<input type="checkbox" name="tank" value="tank" id="check4" class="check4" onclick="boxchanged()">
    Support<input type="checkbox" name="support" value="support" id="check5" class="check5" onclick="boxchanged()">
    Jungler<input type="checkbox" name="jungler" value="jungler" id="check6" class="check6" onclick="boxchanged()">
    Burst<input type="checkbox" name="burst" value="burst" id="check7" class="check7" onclick="boxchanged()">
    <button type="button" onclick="boxchanged()">Reset</button>

Affected divs are designed as following: (The classes changes depending on what the champion can do)

    <div class="champion apcarry mid" id="ahri" onclick="OnClickChampion(this.id)"><img src="img/champions/ahri.jpg"> Ahri </div>

Script:

    function boxchanged ( )
    {   
        $("#num1").val("Search..");
        if ($("[type='checkbox']:checked").length == 0)
            {
                $(".champion").show(200);
            }
        else
            {
            $(".champion").hide(200);
            for (var i = 1;i < 7; i++)
                {
                    var name = "check"+i;
                    console.log(name)
                    var name2 = document.getElementById(name);
                    console.log(name2)
                    if (name2.checked == true)
                        {
                           var name3 = name2.name;
                            $("."+name3).show();
                        }   
                }
           }
    };

Answer 1

你应该停止任何动画

$("."+name3).stop().show();

Answer 2

Here is your code much simplified

DEMO

$(function() {
    $(".champion").on("click",function() {
      // put OnClickChampion here
    });    
    $(".check").on("click",function() {
      $("#num1").val("Search..");
      var checked = $("[type='checkbox']:checked");
        console.log(checked.length);
      if (checked.length == 0) {
        $(".champion").stop().show(200);
      }
      else {
        $(".champion").hide(200);
        checked.each(function() {
          var klass = $(this).val();
          $("."+klass).stop().show(200);
        });
      }    
    });
});

using

<form>
  <label for="check1">AD</label>
    <input type="checkbox" value="adcarry" id="check1" class="check"/>
  <label for="check2">AP</label>
      <input type="checkbox" value="apcarry" id="check2" class="check"/> 
  <label for="check3">Carry</label>
      <input type="checkbox" value="carry" id="check3" class="check"/>
  <label for="check4">Tank</label>
      <input type="checkbox"value="tank" id="check4" class="check"/>
  <label for="check5">Support</label>
    <input type="checkbox" value="support" id="check5" class="check"/>
  <label for="check6">Jungler</label>
    <input type="checkbox"  value="jungler" id="check6" class="check"/>
  <label for="check7">Burst</label>
    <input type="checkbox" value="burst" id="check7" class="check"/>
  <button type="reset" class="check">Reset</button>
</form>
<div class="champion apcarry mid" id="ahri"><img src="img/champions/ahri.jpg"> Ahri </div>

To show only the ones with more than one class

    var klasses=[]
    checked.each(function() {
      klasses.push("."+$(this).val())
    });
    $(".champion").not(klasses.join(",")).stop().hide(200);