Question

我想知道如何在html中创建多个“相同” input type。我有一个网格，并希望为每行提供一些选择。我想将label应用于每个input type，但是我遇到了如何引用input type的{{1}}中的每个label的问题属性。由于for使用for，并且我有多个相同的id实例，因此我该如何参考input type而不做诸如{{1} }，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"。是否有更好的方法使用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

<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，且名称相同。

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"。 / p>

因此，在您的示例中，一些有意义的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>

如果您知道id和select-existing-setting等每一列的含义，则可以更具体地命名select-new-setting。

Answer 5

for似乎无法引用class

单击具有label属性的for将把焦点放在具有相应id的元素上，因此，当两个元素具有相同的{{1} }或id？

您要么在元素上使用唯一的class（应该），要么在您的id上不使用for属性，因为这毫无意义具有非唯一的label属性。

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

5 个答案: