使用复选框进行尾部选择

如何解决使用复选框进行尾部选择

我想使用复选框而不是下拉列表来执行多个尾部选择，我检查了一个代码，但我无法将其转换为复选框，任何人都可以帮助我。

var projects = tail.select("select.projects",{
  deselect: true,multiContainer: ".projects-selected",multiple: true,});
projects.config("multiple",false,true);
projects.on('change',changeFirst);

let tests = tail.select("select.tests",{
  multiContainer: ".tests-selected",disabled: true
});

function getData() {
  var size = Math.floor(Math.random() * 6) + 5;
  var randomEntry = function() {
    var tmp = CryptoJS.MD5(Math.floor(Math.random() * 1000).toString()).toString();
    console.log(tmp);
    return {
      id: 'ID_' + tmp,name: tmp
    };
  };
  return Array.from({
    length: size
  },randomEntry);
}

function changeFirst(opt,event) {
  if (event == 'select') {
    let data = getData();
    let items = {};
    data.forEach(function(entry) {
      items[entry.id] = entry.name
    });
    tests.config('items',items);
    tests.config('disabled',false);
  } else if (event == 'unselect') {
    tests.config('disabled',true);
    tests.config('items',{});
  }
}

<div class="left">
  <select class="projects">
    <option>Project 1</option>
    <option>Project 2</option>
  </select>
</div>
<div class="right">
  <span class="projects-selected"></span>
  <span class="tests-selected"></span>
</div>

我尝试编辑这段代码，但没有得到我想要的，所以谁能帮我整理一下。

输出应该是这样的：

所以当我们点击生成的跨度时，它应该取消选择。 ，但无论尝试提供复选框都不起作用

注意：

尾巴。 select 是 jQuery tail 的重写版本。 select插件，可用于美化和增强无依赖的默认选择框

https://www.cssscript.com/single-multiple-select-tail/#:~:text=Description%3A,select%20box%20with%20no%20dependency.

我不知道这是否可以使用 tail.select 来完成，如果不可能，任何人都可以提出任何其他方法来做到这一点。