Multiple checkboxes with same id but only one works

Question

So my idea is that when i check the checkbox every div named .picpic fades out(except the filtered ones) and when i uncheck they fade back in. The problem is that this jQuery code works only on the first checkbox. Thank you for your ideas.

Checkboxes

<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

If checkbox is checked every .picpic div fades out except the filtered ones and when unchecked they fade back in.

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

Answer 1

So i got the solution i wanted.

• Used classes instead of ID's because ID's are supposed to be unique.

• If checkbox is checked it makes every div except the filtered ones

• fade out. If every checkbox is checked all of the divs are showing.

Checkboxes

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