Question

我有两个带有ID的复选框。

HTML

<div class="controls">
  <label class="checkbox" name="Blood Oxygen">Blood Oxygen
    <input type="checkbox" value="Blood Oxygen" name="1" id="4" checked="checked">
  </label>

  <label class="checkbox" name="Blood Pressure">Blood Pressure
    <input type="checkbox" value="Blood Pressure" name="1" id="6" checked="checked">  </label>
</div>

我需要动态添加更多复选框。但是在添加时我要检查是否存在带有simillar ID的复选框。我要忽略具有类似ID的那个，但要追加其他ID。

这是我的数据来源：

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

以下是我要比较的方式：

$.each(data[0].tests, function(key, val) {
  $(".controls input[type='checkbox']:checked").each(function() {
    var $checked_test_id = $(this).attr('id');
    if ($checked_test_id !== val.id) {
      var $control = $('.controls')
      $($control)
        .append('<label class="checkbox" id="' + val.id + '" name="' + val.name + '">' +
          '<input type="checkbox" value="' + val.name + '" id="' + val.id + '">' + val.name + '</label>');
    }
  })
});

这导致了一个奇怪的结果。我想我不是在想。如何附加尚不存在的复选框？ Peak Flow＆amp; Respiratory Timer

JSFIDDLE

Answer 1

我不完全确定你的代码块是什么，这是简单的解决方案

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

遍历所有测试，看看#<id>是否不存在（长度=== 0），如果它不存在，则追加它。

Answer 2

您可以使用javascripts .map（）functionn映射数组并比较值。如果数组中没有匹配项：添加复选框=）

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

JQuery：如果现有元素id不匹配，则追加新元素

2 个答案: