Ярлыки для нескольких экземпляров одной и той же кнопки

Question

Мне интересно, как создать несколько одинаковых input type в html. У меня есть сетка, и хотел бы какой-то вариант для каждой строки. Я хотел бы применить label к каждому input type, но я сталкиваюсь с вопросом о том, как ссылаться на каждый input type в атрибуте label * for. Так как for использует id, и у меня есть несколько экземпляров одного и того же input type, как бы я мог ссылаться на input type, не делая ничего неблагоприятного, например id='button0', id='button1', id='button2' и и так далее?

Например (код упрощен, а я использую стиль kendo-ui),

<div class="row">
    <div class="col">
        <p>This is a column</p>
        <input type="checkbox" class="k-checkbox" id="select-this">
        <label class="k-checkbox-label" for="select-this">Select this</label>
    </div>
</div>
<div class="row">
    <div class="col">
        <p>This is another column</p>
        <input type="checkbox" class="k-checkbox" id="select-this">
        <label class="k-checkbox-label" for="select-this">Select this</label>
    </div>
</div>

Наличие двух элементов с одинаковым id (в данном случае id="select-this") не рекомендуется, и for не может ссылаться на class. Есть ли лучший способ сделать это с помощью какого-либо инструмента, такого как jQuery, или есть обходной путь?

Answer 1

Мое предложение для вас: вы можете использовать input внутри label, как показано ниже.

Пример:

<div class="row">
  <div class="col">
    <p>This is a column</p>
    <label class="k-checkbox-label"><input type="checkbox" class="k-checkbox">Select this</label>
  </div>
</div>
<div class="row">
  <div class="col">
    <p>This is another column</p>
    <label class="k-checkbox-label"><input type="checkbox" class="k-checkbox">Select this</label>
  </div>
</div>

Answer 2

for не может ссылаться на class

Нажатие label с атрибутом for поместит фокус на элемент с соответствующим id, поэтому какое поведение вы ожидаете, когда два элемента имеют одинаковые id или class?

Либо вы используете уникальные id s в своих элементах (как вы должны), либо вы не используете атрибут for в своих label s, потому что нет абсолютно никакого смысла иметь неуникальные for атрибут.

Answer 3

Вы можете создать скрипт, который динамически устанавливает все id и установить новые id как метки for атрибут.

window.onload = function(){
  for(let tL=document.querySelectorAll('.k-checkbox'), i=0, j=tL.length; i<j; i++){
    var tLabel = tL[i].parentNode.querySelector('label.k-checkbox-label');
    if(tLabel){
      tL[i].name = tL[i].id = 'whatever' + i;
      tLabel.setAttribute('for', tL[i].id)
    }
  }
}

<div class="row">
    <div class="col">
        <p>This is a column</p>
        <input type="checkbox" class="k-checkbox">
        <label class="k-checkbox-label" for="select-this">Select this</label>
    </div>
</div>
<div class="row">
    <div class="col">
        <p>This is another column</p>
        <input type="checkbox" class="k-checkbox">
        <label class="k-checkbox-label" for="select-this">Select this</label>
    </div>
</div>

Answer 4

Даже если у вас есть несколько input с одним и тем же атрибутом type, это не значит, что они должны иметь один и тот же id. Все input с должны иметь уникальные id с.

… как бы я мог ссылаться на тип ввода, не делая ничего неблагоприятного, такого как id='button0', id='button1', id='button2' и так далее?

Уникальные id не являются в целом неблагоприятными. Неблагоприятная часть вашего примера - произвольность ваших id значений. Обычно можно дать каждому id значимое имя, например id="confirm-button", id="cancel-button", id="more-information". И если имеется несколько строк, каждая с кнопками подтверждения, то обычно для каждой строки можно добавить уникальное имя или номер, чтобы сделать каждую строку уникальной - например, id="confirm-button-product-583" и id="confirm-button-product-112".

Так что для вашего примера, некоторые значимые идентификаторы могут быть select-left-col и select-right-col:

<div class="row">
    <div class="col">
        <p>This is a column</p>
        <input type="checkbox" class="k-checkbox" id="select-left-col">
        <label class="k-checkbox-label" for="select-left-col">Select this</label>
    </div>
</div>
<div class="row">
    <div class="col">
        <p>This is another column</p>
        <input type="checkbox" class="k-checkbox" id="select-right-col">
        <label class="k-checkbox-label" for="select-right-col">Select this</label>
    </div>
</div>

Вы можете назвать id более конкретно, если вы знаете, что представляет каждый столбец, например select-existing-setting и select-new-setting.

Answer 5

<div class="row">
    <div class="col">
        <p>This is a column</p>
        <input type="checkbox" class="k-checkbox" id="select-this-one">
        <label class="k-checkbox-label" for="select-this-one">Select this</label>
    </div>
</div>
<div class="row">
    <div class="col">
        <p>This is another column</p>
        <input type="checkbox" class="k-checkbox" id="select-this-two">
        <label class="k-checkbox-label" for="select-this-two">Select this</label>
    </div>
</div>

Id имя не может быть продублировано. id является уникальной собственностью. Но вы можете иметь несколько class с тем же именем.