jQuery select current element with same id

Question

i have N of checkboxes like

<input type="checkbox" id="slider" checked>
<input type="checkbox" id="slider">
<input type="checkbox" id="slider" checked>
<input type="checkbox" id="slider" checked>

When i clicking to checkbox - i need to hadle current checked value(true or false) like this

var status = $("#slider").prop('checked');

But i awlays hadle first id checkbox value

How can i fix this?

It's invalid to have multiple elements with the same `id`. ID's must be unique. — Scott Marcus, Jul 11 '20 at 23:31
id should be unique, so it is not right to use the same id for multiple elements. Better choice would be to use class. — matvs, Jul 11 '20 at 23:32
Does this answer your question? [Check if checkbox is checked with jQuery](https://stackoverflow.com/questions/2204250/check-if-checkbox-is-checked-with-jquery) — matvs, Jul 11 '20 at 23:33

Scott Marcus · Answer 1 · 2020-07-11T23:42:41.997

It's invalid to have multiple elements with the same id. ID's must be unique. Imagine if everyone's handle was AskAlexandria. How would we know who is who?

TIP: If you need to treat a group of elements the same way, use a CSS class name instead.

Most of the time you don't need id's in the first place because they create brittle code that doesn't scale (as you are finding). You can get the checked status of the element that's been interacted with using this.

// Instead of grouping several elements with the same ID,
// use classes instead
$("input.choices").on("click", function(event){
  console.log(this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="choices" checked>
<input type="checkbox" class="choices">
<input type="checkbox" class="choices" checked>
<input type="checkbox" class="choices" checked>

score 0 · Answer 2 · answered Jul 11 '20 at 23:58

in HTML the ID must be unique and you can't define the same ID for each element,

for real example: Like The National ID everybody has National ID, but Everybody has a different National ID

So instead of the ID you can use the classes, and it will work fine,

HTML

<input type="checkbox" class="slider" checked>
<input type="checkbox" class="slider">
<input type="checkbox" class="slider" checked>
<input type="checkbox" class="slider" checked>

Javascript - Jquery

var status = $(".slider").prop('checked');

Hope my answer is useful and helpful !

score 0 · Answer 3 · answered Jul 12 '20 at 00:13

You can use classes as a way to find groups of elements, as another poster suggested. I personally don't like to do that because I think classes should be for CSS styling, and using them with the intent of making them selectors can sometimes lead to unanticipated consequences if you decide to put some class on another element.

It's perfectly alright to add your own properties to an HTML tag and use those. Unlike id, they don't need to have unique values. A way I might handle this would be:

<input type="checkbox" id="slider0" role="slider" checked>
<input type="checkbox" id="slider1" role="slider">
<input type="checkbox" id="slider2" role="slider" checked>
<input type="checkbox" id="slider3" role="slider" checked>

Here I've added a made-up property called role. If I want to find out which sliders are checked, I can get an array of all the sliders and loop through them like this:


let checkedSliders = [];
$('[role="slider"]').each((idx,element)=>{
  if ($(element).prop('checked')) checkedSliders.push(element);
}

You can use any HTML property other than id for non-unique values. The point of id is that it is intended to be totally unique on the page. Many new browsers will have a console warning if multiple tags have the same id.

jQuery select current element with same id

3 Answers3