Javascript没有取消隐藏内容

（我不确定使用什么标题，所以我选择了我认为合适的标题，如果不合适，请告诉我/更改）

所以我在这个传奇联盟的网站上做了一段时间，遇到了麻烦。 我一直在制作一个过滤菜单，过滤“冠军”（英雄）只显示那些具有正确角色/能力的人

所以我在复选框上得到了一个点击脚本，当点击时应该显示正确的冠军。但它似乎不起作用

当我取消选中文本框时，它会正确地收回所有冠军，但当我“选中”它时，所有冠军都会消失（应该这样做），但它不会显示那些应用于过滤器的冠军。（我在DIV上得到了所有正确的id，我知道这一点，因为我有一个搜索栏，它也可以用于过滤，但我想要它的复选框，因为它更简单）

复选框：

    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>

AD
美联社
携带
坦克
支持
密林者
爆发
重置

受影响的div设计如下：（课程根据冠军的能力而变化）

Ahri

脚本：

    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();
                        }   
                }
           }
    };

函数框已更改（）
{   
$（“#num1”）.val（“搜索…”）；
如果（$（“[type='checkbox']：checked”）。长度==0）
{
$（“.champion”）。展览（200）；
}
其他的
{
$（“.champion”）.hide（200）；
对于（变量i=1；i<7；i++）
{
var name=“check”+i；
console.log（名称）
var name2=document.getElementById（名称）；
console.log（名称2）
如果（name2.checked==true）
{
var name3=name2.name；
$（“+name3.show（）；
}   
}
}
};

您应该停止任何动画

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

---

这是您的代码，简化了很多

使用

---

name3的值是什么？所显示的html是什么样子的？name3从相应的checkbox@tymeJV这是复选框上的名称。为什么只使用半个jQuery？谢谢你似乎解决了它我只是好奇，如果我同时勾选AP和Tank，让它只显示那些同时拥有这两个类的人，有没有办法做到这一点？还有你们，谢谢你们抽出时间：）

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

$(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);
        });
      }    
    });
});

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

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