Question

我有一个功能来检查页面上的所有复选框，并动态地将每个复选框项添加到ol。当我单击按钮收集页面上所有可见的复选框时，我想确保它不在ol列表中。试图阻止它们出现两次。

这是我现在拥有的jquery代码，它可以很好地添加到ol：

$('.checkall').click(function () {
 var checkboxes = $(":checkbox");

 $.each(checkboxes, function() {
  if ($(this).hasClass("visibleCounter")){
   $(this).attr('checked', true);
   var productName = $(this).attr("title");
   var productClassName = $(this).attr("name");
   $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
  };
 });
});

.checkall是用于激活操作的按钮类。 #selectedProductsList是我写新li的ol容器。

在将其写入列表之前，只想检查li是否已经在ol中。

任何想法如何做到这一点？

Answer 1

您可以通过按类查询li来管理所有这些，并且只在“全部检查”时处理未选中的复选框

function Check(o) {
    var productClassName = $(o).attr("name");
    if ($(o).is(":checked")) {
        var productName = $(o).attr("title");
        $("#selectedProductsList").append("<li class=\"productList " + productClassName + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">" + productName + "</span></li>");
    }
    else {
        $("#selectedProductsList ." + productClassName).remove();
    }
}

$('.checkall').click(function() {
    $("input:checkbox:not(:checked)").each(function() {
        $(this).attr("checked", true);
        Check(this);
    });
});

$("input:checkbox").click(function() {
    Check(this);
});

这是一个有效的例子：

http://jsfiddle.net/SWP6P/1/

Answer 2

使用隐藏的文本框跟踪您生成的元素。然后，您可以检查该元素的值是否在文本框中。如果是，则不要允许脚本将其添加到元素集合中。只需在文本框中保留逗号分隔的“productClassName”列表。

或者：

您可以为每个元素生成一个由productClassName构造的Id。然后，您只需查询$('#' + productClassName).length，然后查看该ID中是否有任何项目。

Answer 3

您可以在复选框上使用jQuery.data方法标记它们已在列表中。

$(this).data('in_list', true);

仅在数据不存在时附加

if (!$(this).data('in_list')) {
    $("#selectedProductsList").append(...)
}

这是一个fiddle，可以看到它的实际效果

<强>更新

或者更好的是，存储对您在li中创建的.data()的引用，这将允许您在取消选中该复选框后删除该元素。这是一个更新的fiddle

Answer 4

如果您可以访问每个项目的唯一标识符，则可以将其用作<li>的类名称，然后在添加新<li>之前，检查该类是否已存在<ol>

检查是否已经写出动态li元素以防止重复

4 个答案: