尝试使用tagify插件使用动态标签填充文本字段

Question

具有以下代码，这些代码(驻留在对话框中)用作复选框的事件侦听器。我可以通过选中或取消选中各个复选框，使用复选框中的值填充/取消填充文本字段：

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
      // Declare array
      var emails = [];

      // Iterate through each array and put email addresses into array
      $('#emailCheckListId_ul input:checkbox:checked').each(function() {
             emails.push($(this).val());
      });

      // Assign variable as To: text field by obtaining element's id.
      var textField = document.getElementById("root.emailTextField");

      // Add / Remove array from text field
      textField.value = emails;
});

但是，当我使用try使用JQuery Tagify插件时，它只在文本字段中创建一个“标记化的动态标签”，但是当我单击另一个复选框时，它不会创建另一个标签。此外，当我取消选中原始复选框时，它不会删除原始标签。

下面是我使用JQuery tagify插件的代码(我所做的就是保持与上面相同，但在文本字段上调用了tagify函数)：

// Add / Remove array from text field
textField.value = emails;

// Decorate with dynamic label
$(textField).tagify(emails); 

我在浏览器中看到这个JavaScript错误：

jquery.tagify.js:未定义'options‘，第71行

在源代码中，此行代码为：

_setOption: function( key, value ) {
    options.key = value;
},

它说明options.key是未定义的。

要查看jquery.tagify.js complete源代码，请单击here。

我可能做错了什么？有没有办法创建一个"else“，例如：

// Iterate through each array and put email addresses into array
$('#emailCheckListId_ul input:checkbox:checked').each(function() 
{
    // do something
}); 

// how would I define the else when the input:checkbox:checked is not checked:

// I already tried this but it doesn't work:
$('#emailCheckListId_ul input:checkbox:unchecked').each(function() 
{
    // do something else
});

如果有人能帮我的话我会很感激的.

Answer 1

我用下面的代码让它工作：

if (emails.length <= 0) {
    // Remove dynamic labels
    $(textField).tagify('destroy');

    // Empty text field
    textField.value = "";
}
else {
    // Reset tagify
    $(textField).tagify('destroy');

    // Add / Remove array from text field
    textField.value = emails;

    // Decorate with dynamic label
    $(textField).tagify(emails);
}