取消选中该框时，取消填充特定值的输入字段

Question

背景：

将值添加到输入字段：

 $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });

从 HTML 表中删除复选框：

 const checkboxes = document.querySelectorAll('input[type=checkbox]:checked');
 if (checkboxes.length >= 2) {
     checkboxes[1].checked = false;
     
 }

问题：当选中的第二个框未选中时，该值仍然存在于输入字段中。我想要删除该值。有人可以帮助我修改代码或找到解决我的问题的方法吗？我尝试了我能想到的一切，但它不起作用。注意：照片中输入字段中的姓名均为虚构。 图片：
输入字段：

表：

我尝试的是在线研究并尝试我发现的不同东西并将其修改为适合我的项目的地方。我期望发生的是输入字段中的第二个值被删除。真正发生的是第二个值没有被删除

Answer 1

上面的代码似乎可以工作。当您选择名称时，名称会添加到输入框中，并在取消选择时从输入框中删除（请参见下面的演示）

您能更详细地解释一下问题是什么吗？

 $('input:checkbox').change((e) => {
     if ($(e.currentTarget).is(':checked')) {
         var curVal = $('#name').val();
         if (curVal) {
             $('#name').val(curVal + ', ' + e.currentTarget.value);
         } else {

             $('#name').val(e.currentTarget.value);
         }
     } else if (!($(e.currentTarget).is(':checked'))) {
         var curVal = $('#name').val().split(',');
         var filteredVal = curVal.filter(el => el.trim() !== e.currentTarget.value)
         $('#name').val(filteredVal.join(','));
     }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input type="text" id="name"></input>
<br/>
<input type="checkbox" value="Alabama">Alabama<br/>
<input type="checkbox" value="Alaska">Alaska<br/>
<input type="checkbox" value="Arkansa">Arkansa<br/>