检查标签是否存在

Check whether label is exist or not

本文关键字：存在 是否 标签 检查      更新时间：2024-02-13

我需要通过输入标签名称来动态添加checkbox。在这里我可以添加复选框，但问题是若已经存在相同的标签（区分大小写），那个么就不允许用户添加。请帮忙。提前谢谢。

HTML

<input type="button" value="add"  onClick="add()" />
<ul id="container" style="list-style-type:none;">
</ul>

脚本

var i=0;
function add() {
    var label = prompt("Please enter label name", "");
    if (label != null || label != "") {
        i++;  
        var title = label;
        var node = document.createElement('li');        
        node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '">'+ title +'</label>';       
        document.getElementById('container').appendChild(node);
    }
}

Jsfidle

将标签存储在一个数组中，并检查该数组中是否存在新标签，然后继续插入新元素。

var i = 0;
var labels = [];
function add() {
  var label = prompt("Please enter label name", "");
  if (label != null || label != "") {
    if (labels.indexOf(label) == -1) {
      labels.push(label); i++;
      var node = document.createElement('li');
      node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '">' + labels[labels.length - 1] + '</label>';
      document.getElementById('container').appendChild(node);
    } else {
      alert("labels should be unique!")
    }
  }
}

演示

您可以尝试以下操作：

var i=0;
function add() {
    var label = prompt("Please enter label name", "");
    var exists = document.evaluate('//label[text()="' + label + '"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, exists).snapshotItem(0);
    if (exists) {
        return; 
    }
    if (label != null || label != "") {
        i++;  
        var title = label;
        var node = document.createElement('li');        
        node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '">'+ title +'</label>';       
        document.getElementById('container').appendChild(node);
    }
}

您可以使用data属性和querySelector来检查是否存在。

var i=0;
function add() {
    var label = prompt("Please enter label name", "");
    var labels = ;
    if ((label != null || label != "") && !document.querySelector('label[data-value="'+label+'"]')) {
        i++;  
        var title = label;
        var node = document.createElement('li');        
        node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '" data-value="'+title+'">'+ title +'</label>';       
        document.getElementById('container').appendChild(node);
    }
}
相关文章：