Question

我最初在复选框下方：

<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>');
});

您可以看到Flow＆amp; Timer也会再次创建。

如何删除旧flow＆amp; Timer并制作新的Flow＆amp;选中Timer复选框？

旧Flow＆amp; Timer具有name属性，我不想要它们。

JSFIDDLE

Answer 1

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

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

（来自http://api.jquery.com/prop/）

我喜欢回放字符串的那个，所以我可以在html中轻松插入它。在此之后，您可以删除旧复选框并创建一个新复选框。

顺便说一句：您的脚本会使项目具有重复的ID（标签和复选框具有相同的ID）。这会让你陷入困境。改变这一点会更安全。

＆＃13;

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) {

ischecked=$('#'+val.id).attr( "checked" )
$('#'+val.id).parent().remove()

  $('.controls').append('<label class="checkbox" for="' + val.id + '" name="' + val.name + '">' +
      '<input type="checkbox" value="' + val.name + '" id="' + val.id + '" '+ischecked+'>' + val.name + '</label>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" crossorigin="anonymous">

<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>

＆＃13;

Answer 2

首先，您必须使用.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(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);

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

2 个答案: