如何实现复选框选中值在文本框中显示（多选项逗号分隔）

很简单，我们只需要调整一下事件处理逻辑：每次复选框状态变化时，收集所有被选中的复选框值，用逗号连接后直接更新文本框内容即可。下面是修改后的完整代码：

<input type="text" id="results">
<div id="multiselect-drop">
  <input type="checkbox" value="Testing the textbox">
  <input type="checkbox" value="Testing 2 the textbox">
  <!-- 可以添加更多复选框测试 -->
  <input type="checkbox" value="Another test value">
</div>

<script>
$('#multiselect-drop input').change(function() {
  // 收集所有被选中的复选框的值
  const selectedValues = $('#multiselect-drop input:checked').map(function() {
    return this.value;
  }).get();
  
  // 用逗号分隔拼接成字符串，设置到文本框中
  $('#results').val(selectedValues.join(', '));
});
</script>

代码说明： #

• $('#multiselect-drop input:checked')：选中所有处于勾选状态的复选框
• .map().get()：把选中的DOM元素转换成它们的value数组
• .join(', ')：将数组元素用逗号加空格连接成字符串，也可以根据需求改成只加逗号（join(',')）
• .val()：直接设置文本框的内容，替代原来的添加/删除li的逻辑

这样不管你有多少个复选框，只要勾选，它们的值就会自动以逗号分隔的形式显示在文本框里，取消勾选也会实时更新去掉对应的值~

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