Javascript JQuery：识别重复元素并删除旧条目

我最初有以下复选框：

<div class="controls">
  <label class="checkbox" name="Flow">Flow
    <input type="checkbox" value="Flow" name="1" id="8" checked="checked">
  </label>
 <label class="checkbox" name="Timer">Timer
   <input type="checkbox" value="Timer" name="1" id="17" checked="checked">
 </label>
</div>

流动
计时器

从我的数据源中添加动态复选框：

data = [{
  "id": 3,
  "name": "Respiratory & COPD",
  "slug": "respiratory_and_copd",
  "tests": [{
      "id": 4,
      "name": "Oxygen"
    },
    {
      "id": 6,
      "name": "Pressure"
    },
    {
      "id": 8,
      "name": "Flow"
    },
    {
      "id": 17,
      "name": "Timer"
    }
  ]
}]


$.each(data[0].tests, function(key, val) {
  $('.controls').append('<label class="checkbox" name="' + val.name + '">' +
      '<input type="checkbox" value="' + val.name + '" id="' + val.id + '">' + val.name + '</label>');
});

数据=[{
“id”：3，
“名称”：“呼吸和慢性阻塞性肺病”，
“鼻涕虫”：“呼吸性”和“慢性阻塞性肺病”，
“测试”：[{
“id”：4，
“名称”：“氧气”
},
{
“id”：6，
“名称”：“压力”
},
{
“id”：8，
“名称”：“流量”
},
{
“id”：17，
“名称”：“计时器”
}
]
}]
$.each（数据[0]。测试，函数（键，值）{
$（'.controls'）。追加（''+
''+val.name+''；
});

您可以看到

流

和

计时器

也正在重新创建

如何删除旧的

流

和

计时器

，并选中新的

流

和

计时器

复选框

旧的

Flow

和

Timer

具有name属性，我不想要它们

---

因此，首先检查是否选中了旧复选框。您可以通过以下两种方式完成此操作：

elem.checked    true (Boolean) Will change with checkbox state
$( elem ).prop( "checked" )     true (Boolean) Will change with checkbox state
elem.getAttribute( "checked" )  "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6)   "checked" (String) Initial state of the checkbox; does not change
$( elem ).attr( "checked" ) (1.6.1+)    "checked" (String) Will change with checkbox state
$( elem ).attr( "checked" ) (pre-1.6)   true (Boolean) Changed with checkbox state

（来自）

我喜欢返回字符串的那个，这样我就可以很容易地将它插入html中。在此之后，您可以删除旧复选框并创建一个新复选框

顺便说一句：您的脚本使项目具有重复的id（标签和复选框具有相同的id）。这会给你带来麻烦。改变这一点会更安全

数据=[{
“id”：3，
“名称”：“呼吸和慢性阻塞性肺病”，
“鼻涕虫”：“呼吸性”和“慢性阻塞性肺病”，
“测试”：[{
“id”：4，
“名称”：“氧气”
},
{
“id”：6，
“名称”：“压力”
},
{
“id”：8，
“名称”：“流量”
},
{
“id”：17，
“名称”：“计时器”
}
]
}]
$.each（数据[0]。测试，函数（键，值）{
ischecked=$（'#'+val.id）.attr（“选中”）
$（'#'+val.id）.parent（）.remove（）
$（'.controls'）。追加（''+
''+val.name+''；
});

流动
计时器
首先，您必须使用
.html（）
而不是
.append（）

对于每个记录，必须添加到变量中，最后必须将其附加到
.control
元素中

将javascript替换为以下内容：

var htmlData = '';
$.each(data[0].tests, function(key, val) {
    htmlData += '<label class="checkbox" id="' + val.id + '" name="' + val.name + '">' +
      '<input type="checkbox" value="' + val.name + '" id="' + val.id + '" checked>' + val.name + '</label>'
});
$('.controls').html(htmlData);

var htmlData=''；
$.each（数据[0]。测试，函数（键，值）{
htmlData+=“”+
''+val.name+''
});
$（'.controls'）.html（htmlData）；

请针对您的场景尝试以下操作：

var htmlData = '';

$.each(data[0].tests, function(key, val) {
var duplicate = $('.controls').find('input[id="'+val.id+'"]');
var isCheck = false;
if(duplicate.length == 1){
    isCheck = "checked";
    }

    htmlData += '<label class="checkbox" id="' + val.id + '" name="' + val.name + '">' +
      '<input type="checkbox" value="' + val.name + '" id="' + val.id + '" '+isCheck+'>' + val.name + '</label>';
});
$('.controls').html(htmlData);

var htmlData=''；
$.each（数据[0]。测试，函数（键，值）{
var duplicate=$（'.controls'）.find（'input[id=“'+val.id+'”）；
var isCheck=false；
if（duplicate.length==1）{
isCheck=“已检查”；
}
htmlData+=“”+
''+val.name+''；
});
$（'.controls'）.html（htmlData）；
它只是删除了[name=“1”]元素，但没有检查新的流和计时器。如果我没有很好地解释，就在帖子上进行编辑实际上，我不能使用$（'[value=“Timer”]'）.prop（'checked'，true）$（'[value=“Flow”]'）.prop（'checked'，true）；这只是一些示例代码，可能还有其他各种值。我只是想知道一个更好的方法来与旧值进行比较，删除它并保留新值。这样，我想如果我删除我看到的旧ID，它不会有重复ID的问题。然后检查是否存在旧复选框，检查是否已选中，删除旧复选框并创建一个新复选框，这将是一件好事。您仍然需要对脚本中label和checkbox获得相同id的事实做一些处理。也许，标签根本不需要和id。我目前正在四处寻找答案。请稍等：-）它会检查所有其他字段，而不仅仅是FLOW和Timer请使用更新的代码进行检查。它起作用了。它将检查同一个id的复选框是否已经存在，如果存在，它将检查该复选框，否则它将只追加。随机问题为什么建议使用.html（）而不是.append（）append将不会替换复选框中新更新的值，而使用html将获得新值。假设id是数据中的主键，并且名称已更改，那么在这种情况下，您必须使用.html（）而不是.append（）。