CODEWITHSUNDEEP
jqueryhtmlcheckboxfadeinfadeout
in2d
in2d

Reputation: 638

Multiple checkboxes with same id but only one works

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

Upvotes: 0

Views: 3889

Answers (3)

in2d
in2d

Reputation: 638

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/

Upvotes: 0

Nermal Skywalker
Nermal Skywalker

Reputation: 49

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

Upvotes: 1

Dan Soper
Dan Soper

Reputation: 678

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.

Upvotes: 4

Related Questions