jQuery выбрать текущий элемент с таким же идентификатором

Question

У меня есть N флажков, например

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

Когда я нажимаю на флажок - мне нужно изменить текущее проверенное значение (истинное или ложное), как это

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

Но я не могу Значение флажка для первого идентификатора hadle

Как я могу это исправить?

Answer 1

в HTML идентификатор должен быть уникальным, и вы не можете определить один и тот же идентификатор для каждого элемента,

для реального примера: как и национальный идентификатор, у всех есть национальный идентификатор, но у всех есть другой национальный идентификатор

Таким образом, вместо идентификатора вы можете использовать классы, и он будет работать нормально,

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');

Надеюсь, мой ответ будет полезным и полезным!

Answer 2

Вы можете использовать классы как способ поиска групп элементов, как предложил другой плакат. Мне лично не нравится это делать, потому что я считаю, что классы должны быть предназначены для CSS стилей, и использование их с намерением сделать их селекторами иногда может привести к непредвиденным последствиям, если вы решите поместить какой-то класс в другой элемент.

Вполне нормально добавить свои собственные свойства в тег HTML и использовать их. В отличие от id, им не обязательно иметь уникальные значения. Я мог бы справиться с этим следующим образом:

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

Здесь я добавил вымышленное свойство под названием role. Если я хочу узнать, какие ползунки отмечены, я могу получить массив всех ползунков и l oop через них следующим образом:

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

Вы можете использовать любое HTML свойство кроме id для неуникальных значений. Смысл id в том, что он предназначен для того, чтобы быть полностью уникальным на странице. Во многих новых браузерах отображается предупреждение консоли, если несколько тегов имеют одинаковые id.

Answer 3

Недопустимо иметь несколько элементов с одним и тем же id. ID должен быть уникальным. Представьте, если бы у каждого был номер AskAlexandria. Как мы узнаем, кто есть кто?

СОВЕТ: Если вам нужно обрабатывать группу элементов одинаково, используйте вместо этого имя класса CSS.

В большинстве случаев вы не используете id не нужны в первую очередь, потому что они создают хрупкий код, который не масштабируется (как вы обнаружите). Вы можете получить проверенный статус элемента, с которым взаимодействовали, используя 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>