Question

我有一个复选框，我变成了一个复选标记。它被附加到多个li语句中，我遇到的问题是每个li语句都以相同的id元素结束，这导致只检查了一个元素。我附加了一个工作jsfiddle如下 https://jsfiddle.net/25er3cx9/1/

我尝试将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>');});

所以每个li语句都附加了上面的内容，导致所有elments具有相同的id。有没有一种方法可以设置它而不会多次使用相同的ID？

Answer 1

你必须改变“id”＃39; ＆＃39;为＆＃39; label标签中的属性：

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

Answer 2

不确定你准确接近的是什么。首先，我认为你不应该使用＆＃34; display：none＆＃34;在课堂上，也许在风格上是非常正确的。如风格=＆＃34;显示：无＆＃34;，如果你想逐个检查它你应该使用不同的id，id可能基于后端变量。

希望这有助于你。

试试这样吗？使用Node 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>');
});

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

2 个答案:

希望这有助于你。