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

Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Dec 21 '17 at 19:45

score 3 · Answer 1 · answered Dec 21 '17 at 20:06

3

document.getElementById does just that: gets one element with that ID. The HTML specs don’t allow you to have more than one element for any ID.

In this instance you could switch to class or name.

answered Dec 21 '17 at 20:06

Dan Soper

639
8
18

Yes you are all correct VolcovMeter, Taplar and Dan Soper. I feel silly that i didn't come to this on my own. But now i ran into another problem. When i choose 2 checkboxes it should show both divs with given value in checkbox(example: i check checkbox 1 and 2 and it gives me divs with value a1 and a2.). But the divs that have dissapeared they dont appear back when i uncheck the checkbox. – in2d Dec 21 '17 at 20:14
1

I’d need to see more of your code, especially how $filteredResults is getting created. Have a look at your logic there. – Dan Soper Dec 21 '17 at 20:18
Not exactly. If all 3 checkboxes are checked it should show all 3 different divs. – in2d Dec 22 '17 at 15:47
Oh yes. The chances I made don’t seem to have saved. – Dan Soper Dec 22 '17 at 15:51
So i came up with this https://jsfiddle.net/01o2pawk/1/ Please let me know when you have better/shorter solution. I am very interested. :) – in2d Dec 22 '17 at 16:01

score 1 · Answer 2 · answered Dec 21 '17 at 22:18

1

If you're going to style multiple elements using one text area try using classes rather than ids.

answered Dec 21 '17 at 22:18

Nermal Skywalker

49
1
8

in2d · Accepted Answer · 2017-12-22T16:30:27.923

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/

Multiple checkboxes with same id but only one works

3 Answers3