javascript - 检查标签是否存在

Question

我需要通过输入标签名称动态添加复选框。 在这里我可以添加复选框，但问题是如果相同的标签(区分大小写)已经存在，则不应允许用户添加。请帮忙解决这个问题。提前致谢。

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