同一按钮的多个实例的标签答案

【问题标题】：Labels for multiple instances of the same button同一按钮的多个实例的标签
【发布时间】：2018-07-06 06:16:37
【问题描述】：

我想知道如何在 html 中创建多个“相同”input type。我有一个网格，并且希望每一行都有一些选项。我想将label 应用于每个input type，但我遇到了如何在label 的for 属性中引用每个input type 的问题。由于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，或者有解决方法吗？

【问题讨论】：

id 应该是唯一的。所以只需设置一个独特的id 并使其工作:-)
@Lain 想象一个有 100 个复选框的案例。真的没有比id='checkbox0', id='checkbox1' ... id='checkbox99' 更好的方法来生成这些输入元素吗？
我明白你的意思了。
您是否考虑过模板化这些项目？如果您使用剑道的网格等，那么它们的模板很容易相处。我准备了一个简单的道场dojo.telerik.com/ocAVAWIr，它将为您动态识别项目
@DavidShorthose，这非常有用，感谢您的演示！我会更多地研究模板。

标签： javascript jquery html kendo-ui

【解决方案1】：

我对你的建议是，你可以在label 中使用input，如下例所示。

示例：

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

【讨论】：

完全忘记了这种可能性:-)
遗憾的是，这种语法似乎不适用于kendo。见：jsfiddle
@Kelly Freet：这似乎是样式/事件冒泡问题 - 复选框中的值已正确设置。

【解决方案2】：

您可以创建一个脚本，动态设置所有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>

【讨论】：

鉴于 OP 提到有 100 多个复选框的情况，人们会希望他的 html 代码是动态生成的，因此已经设置唯一 ID 可能更有意义在生成时，而不是事后通过 DOM 操作。
@Kevin Van Dyck：我们只能推测。但老实说，我会接受 John R 的建议，因为 id 根本不重要 - 但是会生成 DOM。
根据之后复选框的值是如何处理的，您可能仍然需要为您的元素提供一个唯一的 name 属性，因此您也可以使用它作为 id 。 .
@Lain 无需猜测，这是直接从马嘴里说的：我提到了有 100 多个复选框的案例，因为这就是我将要使用的。我现在意识到我应该在帖子中提到这一点。

【解决方案3】：

即使您有多个inputs 具有相同的type 属性，但这并不意味着它们应该具有相同的id。所有inputs 都应该有唯一的ids。

...我将如何引用输入类型而不做一些不利的事情，例如id='button0'、id='button1'、id='button2' 等等？

独特的ids 总体来说并不不利。您的示例的不利部分是您的 id 值的任意性。通常可以给每个id 一个有意义的名称，例如id="confirm-button"、id="cancel-button"、id="more-information"。如果有多行，每行都有确认按钮，那么通常可以为每一行添加一个唯一的名称或编号，以使每一行都独一无二——例如，id="confirm-button-product-583" 和 id="confirm-button-product-112"。

因此，对于您的示例，一些有意义的 ID 可能是 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>

如果您知道每一列代表什么，您可以更具体地命名ids，例如select-existing-setting 和select-new-setting。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

for 似乎无法引用 class

单击具有for 属性的label 会将焦点放在具有相应id 的元素上，那么当两个元素具有相同的id 或class 时，您会期望哪种行为？

要么你在你的元素上使用唯一的ids（你应该这样做），要么你不在你的labels上使用for属性，因为拥有一个非唯一的绝对没有意义for 属性。

【讨论】：