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/

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

3 个答案: