多个具有相同ID但仅有一个的复选框有效

Question

所以我的想法是，当我选中复选框时，每个名为.picpic的div都会淡出（除了已过滤的那些），当我取消选中时，它们会淡入。问题是此jQuery代码仅适用于第一个复选框。谢谢你的想法。

复选框

<form>
    <label>
      <input type="checkbox" id="selectedv" value="a1"/> a1 </label>

    <label>
      <input type="checkbox" id="selectedv" value="a2" /> a2 </label>

    <label>
      <input type="checkbox" id="selectedv" value="a3" /> a3 </label>

  </form>

jQuery的

如果选中复选框，则每个.picpic div除了已过滤的内容之外淡出，当未选中时，它们会淡入。

if(document.getElementById('selectedv').checked) {
$('.picpic').not($filteredResults).fadeOut(1000)
} else {
    $('.picpic').fadeIn(1000)();
}
});

Answer 1

document.getElementById就是这样做的：获得一个带有该ID的元素。 HTML规范不允许您为任何ID提供多个元素。

在这种情况下，您可以切换到class或name。

Answer 2

如果您要使用一个文本区域设置多个元素的样式，请尝试使用类而不是ID。

Answer 3

所以我得到了我想要的解决方案。

• 使用的是代替ID的类，因为ID应该是唯一的。
• 如果选中复选框，则会生成除过滤后的每个div
• 淡出。如果选中每个复选框，则显示所有div。

复选框

    <form>
        <label>
          <input type="checkbox" class="selected v" value="a1"/> a1 </label>

        <label>
          <input type="checkbox" class="selected a" value="a2" /> a2 </label>

        <label>
          <input type="checkbox" class="selected z" value="a3" /> a3 </label> <br>

</form>

jQuery的

 if($('input.selected').is(':checked')) {
        $('.picpic').not($filteredResults).fadeOut(1000)
        $($filteredResults).fadeIn(1000)()
        } else {
            $('.picpic').fadeIn(1000)();
    }

https://jsfiddle.net/01o2pawk/1/