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

Question

所以我的想法是，当我选中复选框时，每个 div 命名的 .picpic 都会淡出（过滤的除外），当我取消选中时，它们会淡入。问题是这个 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 但只有一个有效的多个复选框

Multiple checkboxes with same id but only one works

html

checkbox

jquery

fadeout

fadein