javascript - 同一按钮的多个实例的标签

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

我给您的建议是，您可以在 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>