带有复选框的 jQuery 下拉列表

帮助实现想法，第二天我战斗。有必要从复选框实现下拉列表，并且在选中时，应在输入中显示该值，并在删除时将其删除。

我是这样实现的，它似乎可以工作，但是如果你输入几个输入，那么结果，一个楔形，每个人的列表都会退出，如果你放弃它，然后假装检查值的数量​​所有输入

<div class="col-3" id="col1">
                  <div class="headVolumeGroup" id="headVolumeGroup1">
                    <input class="effect-1" data-parameter="1"  data-id="volumeGroupsStringReturnException1"
                           type="text" autocomplete="off"
                           id="volumeGroupsStringReturnException1"  />
                    <span class="focus-border"></span>
                    <p class="multiSel" id="multiSel1" hidden></p>
                  </div>
                  <div class="listVolumeGroup" id="listVolumeGroup1">
                    <div class="mutliSelect" id="mutliSelect1">
                      <ul>
                        <li>
                          <input type="checkbox" value="120" />120</li>
                        <li>
                          <input type="checkbox" value="138" />138</li>
                        <li>
                          <input type="checkbox" value="150" />150</li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-3" id="col2">
                  <div class="headVolumeGroup" id="headVolumeGroup2">
                    <input class="effect-1" data-parameter="2" data-id="volumeGroupsStringReturnException2"
                           type="text" autocomplete="off"
                           id="volumeGroupsStringReturnException2"  />
                    <span class="focus-border"></span>
                    <p class="multiSel" id="multiSel2" hidden></p>
                  </div>
                  <div class="listVolumeGroup" id="listVolumeGroup2">
                    <div class="mutliSelect" id="mutliSelect2">
                      <ul>
                        <li>
                          <input type="checkbox" value="120" />120</li>
                        <li>
                          <input type="checkbox" value="138" />138</li>
                        <li>
                          <input type="checkbox" value="150" />150</li>
                      </ul>
                    </div>
                  </div>
                </div>

和 JS 本身

$(document).ready(function(){

$(".col-3 .headVolumeGroup input").on('click', function() {
  $(".col-3 .listVolumeGroup ul").slideToggle('fast');
});

$(document).bind("click", function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("col-3"))
    $(".col-3 .listVolumeGroup ul").hide();
  });

 $('.mutliSelect input[type="checkbox"]').on("click", function() {
   var title = $(this)
      .closest(".mutliSelect")
      .find('input[type="checkbox"]')
    .val(),
  title = $(this).val() + ",";
if ($(this).is(":checked")) {
  var html = '<span title="' + title + '">' + title + "</span>";

  $(".multiSel").append(html);
  var val = $(".multiSel").text();
   $(".col-3 .headVolumeGroup input").val(val);
} else {
  $('span[title="' + title + '"]').remove();
  var val = $(".multiSel").text();
  $(".col-3 .headVolumeGroup input").val(val);
}
});
}); 

我试图找出必要的 id 和具有属性的某个 num，然后将它们蒙蔽，以便最终每个人都有自己的输入。但最终，变量未能抛出值。

像这样

$(document).ready(function(){
var element;
var id;

 $(".col-3 .headVolumeGroup input").on('click', function() {
    id = this.getAttribute("data-parameter"); 
    element = this.getAttribute("data-id"); 
  $("#col" + id + " #listVolumeGroup" + id + " ul").slideToggle("fast");
 });
 $(document).bind("click", function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("col-3"))
  $("#col" + id + " #listVolumeGroup" + id + " ul").hide();
 });

 $('#mutliSelect' + id + ' input[type="checkbox"]').on("click",    function() {
var title = $(this)
    .closest("#mutliSelect" + id)
    .find('input[type="checkbox"]')
    .val(),
  title = $(this).val() + ",";

if ($(this).is(":checked")) {
  var html = '<span title="' + title + '">' + title + "</span>";
  $("#multiSel" + id).append(html);
  var val = $("#multiSel" + id).text();
  $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
} else {
  $('span[title="' + title + '"]').remove();
  var val = $("#multiSel" + id).text();
  console.log(element);
  $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val);
}
});
});

当然，它没有正常工作。

请帮忙，我本人仍处于学习 jQuery 的初级阶段。我可以在 js 上做到这一点，但我想了解它在 jQuery 上的表现。