jQuery实现多选框选中值的美化展示（自定义分隔/标记）

刚好碰到过类似的需求，给你两种解决方案，从基础格式到更美观的标记样式都覆盖到了：

基础方案：实现「1, 2, 3」格式 #

你已经通过map/get方法拿到了选中值的数组，只需要利用数组的join()方法，把默认的逗号分隔改成「逗号+空格」的分隔符就行，一步搞定：

$('#save_value').click(function() {
  // 获取选中复选框的值数组
  const checkedValues = $('input[type=checkbox]:checked')
    .map(function(_, el) { return $(el).val(); })
    .get();
  
  // 用", "作为分隔符拼接数组元素
  const formattedText = checkedValues.join(', ');
  
  // 将结果插入到目标表格单元格（替换成你的单元格选择器）
  $('.target-table-cell').text(formattedText);
});

更优方案：实现带标记的「1 2 3」样式 #

如果想要更美观的展示效果（比如类似标签的样式），可以把每个选中值转换成带HTML标签的元素，再插入到单元格中，配合CSS让样式更精致：

JavaScript代码 #

$('#save_value').click(function() {
  // 获取选中复选框的值数组
  const checkedValues = $('input[type=checkbox]:checked')
    .map(function(_, el) { return $(el).val(); })
    .get();
  
  // 把每个值转换成带标签的HTML字符串
  const taggedHtml = checkedValues.map(value => 
    `<span class="check-tag">${value}</span>`
  ).join(' '); // 用空格分隔每个标签
  
  // 注意这里要用html()方法插入HTML内容，而不是text()
  $('.target-table-cell').html(taggedHtml);
});

配套CSS样式 #

给标签加一点基础样式，让它看起来更像标记：

.check-tag {
  display: inline-block;
  padding: 4px 10px;
  background-color: #f0f4f8;
  border-radius: 16px;
  margin-right: 6px;
  font-size: 0.9rem;
  color: #2d3748;
}

这样最终展示出来的就是一个个独立的小标签，视觉效果比纯文本好很多~

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