Html 如何向li元素添加多个复选标记

我有一个复选框，我把它变成了一个复选标记。它被附加到多个li语句中，我遇到的问题是，每个li语句都以相同的id元素结束，这导致只检查了一个元素。 我附上了一个工作JSFIDLE，如下所示

我尝试将id更改为类，如下所示：

<span><input type="checkbox" class="display:none" id="cb"  ><label for="cb" class="checkmark"></label></span> // this is how it is currently

//这就是当前的情况

我试过的

<span><input type="checkbox" class="display:none cb" ><label for="cb" class="checkmark"></label></span> // when i tried this it stops working,doesnt allow me to tick the checkmark

//当我尝试此操作时，它停止工作，不允许我勾选复选标记

上面的代码被添加到我的元素中 如下

var list = $('<ul></ul>');
$.each(this.Markets, function () {
   list.append('<li style="padding-left:28px"><a class="internal" data- data-nodeid = "' + this.NodeId + '"><span><input type="checkbox" class="display:none" id="cb" ><label for="cb" class="checkmark"></label></span>' + this.Name + '</a></li>');});

var list=$（'
'）；
$.each（此.Markets，function（）{
list.append（“
”+this.Name+”
）；}）；

因此，传入的每个li语句都会附加上面的语句，这将导致所有elments都具有相同的id。

---

有没有一种方法可以设置它而不必多次使用相同的id？

您还必须更改标签标签中的“id”和“for”属性：

<span><input type="checkbox" class="display:none" id="cb1"  ><label for="cb1" class="checkmark"></label></span>
<span><input type="checkbox" class="display:none" id="cb2"  ><label for="cb2" class="checkmark"></label></span>

---

不太确定你想要接近什么。 首先，我认为你不应该在课堂上使用“display:none”，也许在style中是非常正确的。比如style=“display:none”，如果你不想逐一检查，你应该使用不同的id，id可能基于后端变量

希望这对你有帮助。 像这样试试？ 使用节点Id识别不同的复选框

var list = $('<ul></ul>');
$.each(this.Markets, function() {
    list.append('<li style="padding-left:28px"><a class="internal" data- data-nodeid = "' + this.NodeId + '"><span><input type="checkbox" class="display:none" id="cb'+this.NodeId+'" ><label for="cb" class="checkmark"></label></span>' + this.Name + '</a></li>');
});

var list=$（'
'）；
$.each（this.Markets，function（）{
list.append（“
”+this.Name+”
”）；
});

Hi，是的，我不知道如何更改附加的ID，我已经更新了我的代码，希望这会更好！！非常感谢你，我甚至没有意识到这一点，它整天都在困扰着我。我唯一改变的是，我还将它添加到标签上，用于=“cb'+this.NodeId+”“干得好，祝你度过愉快的一天。”