如何实现多选框选中值以逗号分隔显示在文本框中？

我来帮你搞定这个问题～你当前的代码只针对单个复选框的状态做处理，选中时直接赋值单个值、取消时直接清空文本框，自然会出现新值覆盖旧值的情况。咱们可以调整逻辑，每次复选框状态变化时，收集所有已选中的复选框的值，再把它们拼接成逗号分隔的字符串显示在文本框里。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="results">
<div id="multiselect-drop">
  <input type="checkbox" value="Testing the textbox">
  <input type="checkbox" value="Testing 2 the textbox">
</div>

<script>
$('#multiselect-drop input').change(function() {
  // 筛选所有已选中的复选框，提取它们的value值
  const selectedItems = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get();
  
  // 将数组转为逗号分隔的字符串，赋值给文本框
  $('#results').val(selectedItems.join(', '));
});
</script>

代码说明 #

1. 收集选中值：使用$('#multiselect-drop input:checked')筛选出所有已选中的复选框，再通过map()方法提取每个复选框的value，最后用get()把jQuery对象转换成普通数组。
2. 拼接并赋值：用join(', ')把数组元素拼接成带逗号和空格的字符串（如果不需要空格可以用join(',')），再把这个字符串赋值给文本框。
3. 兼容选中/取消操作：不管是选中新的复选框，还是取消已选中的，都会重新计算所有选中项，完美解决覆盖或错误清空的问题。

内容的提问来源于stack exchange，提问作者Arshad Arsal