Question

我有一张桌子，上面有复选框，但没有一个ID。我没有能力更改HTML以添加复选框ID，然后添加标签，因此我无法使用FontAwesome进行样式设置。

要为每个复选框生成ID，我添加了此功能

$("input").each(function () {
    $(this).uniqueId();
});

当前的HTML看起来像这样

<tr><td>
<input type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input type="checkbox" name="WR0002" value="13444">
</td></tr>

该脚本现在正在为每个输入添加唯一ID，但是我想添加一个与每个输入ID匹配的标签，如何完成此操作，因此生成的HTML看起来像这样

<tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
<label for="randomID1"></label>
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
<label for="randomID2"></label>
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
<label for="randomID3"></label>
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
<label for="randomID4"></label>
</td></tr>

Answer 1

生成ID后，您可以创建标签元素，并使用.after()将其放置在每次输入之后：

$("input").each(function () {
    // $(this).uniqueId();
    let label = document.createElement('label');
    label.setAttribute('for', this.id);
    label.innerText = this.id;
    $(this).after(label);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr><td>
<input id="randomID1" type="checkbox" name="RB0002" value="11192">
</td></tr>

<tr><td>
<input id="randomID2" type="checkbox" name="RB0002" value="11242">
</td></tr>

<tr><td>
<input id="randomID3" type="checkbox" name="QB0002" value="12122">
</td></tr>

<tr><td>
<input id="randomID4" type="checkbox" name="WR0002" value="13444">
</td></tr>
</table>

Answer 2

您可以通过multiple的方式进行操作，还可以选择以下最适合您的最合适的。您甚至不需要使用uniqueId插件来添加id's

第一个解决方案

您可以简单地使用counter来添加id。添加ID后，请使用wrap方法将所有id's与label和choice的一些文本一起使用。

$('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'), //some text for each label
    for: $(this).id //id
  })
})

实时演示：

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter)
  counter++
});

$('input').wrap(function() {
  return $('<label />', {
    text: $(this).attr('id'),
    for: $(this).id
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>

</table>

第二个解决方案

如果您想同时完成一项功能，则可以使用append函数，如下所示：

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter) //assign ID
  counter++
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for=' + getID + '>' + getID + '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});

实时演示：

var counter = 0
$("input").each(function() {
  $(this).attr('id', 'randomID' + counter) //assign ID
  counter++
  //Add label
  var getID = $(this).attr('id') //label
  var label = '<label for=' + getID + '>' + getID + '</label>' //make label
  var tdParent = $(this).parent() //td parent
  tdParent.append(label) //append label after input
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11192">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="RB0002" value="11242">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="QB0002" value="12122">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" name="WR0002" value="13444">
    </td>
  </tr>
</table>

Answer 3

将uniqueId分配给变量，然后将其附加。

$("input").each(function () {

    let id = 'randomID4';

   $('#'+id).append('<label for='+id+'></label>');

}）;

我如何动态添加ID并向每个复选框动态添加标签

3 个答案: