Question

我需要输入标签名称来动态添加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);
    }
}

Jsfiddle

Answer 1

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

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!")
    }
  }
}

DEMO

Answer 2

您可以尝试这样的事情：

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

Answer 3

您可以使用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);
    }
}

检查标签是否存在

3 个答案:

DEMO