如何让Bootstrap复选框选中值组成的数组结果逐行展示用于打印

解决方案 #

你遇到的问题核心有两点：

1. 直接将数组传入.text()方法时，会默认调用数组的toString()方法，输出逗号拼接的纯文本
2. .text()方法会将所有传入内容当做纯文本处理，即使插入<br>也只会显示为普通字符，不会解析为换行标签

你可以任选以下两种方案修改：

方案1：用HTML标签实现换行

修改你的jQuery代码中给#results_after赋值的部分即可：

$("#results_message").text("The results are:");
$("button").on("click", function () {
 var array = [];
 $("input:checkbox[name=type]:checked").each(function () {
   array.push($(this).val());
 });
 // 原来的text()换成html()，数组用<br>拼接
 $("#results_after").html(array.join('<br>'));
 $('#results_after').printThis();
});

方案2：用CSS控制换行（安全性更高，避免XSS风险）

先修改jQuery赋值部分：

// 用换行符拼接数组，仍然用text()赋值
$("#results_after").text(array.join('\n'));

再给#results_after的CSS规则新增一行属性：

#results_after {
  color: green;
  font-size: 24px;
  font-weight: bold;
  visibility: hidden;
  white-space: pre-line; /* 新增这行，让文本识别换行符 */
}

额外优化提示 #

你当前HTML中两个复选框使用了重复的id="flexCheckDefault"，不符合HTML规范，会导致点击label时无法正确触发对应复选框的选中状态，建议修改为不同的ID，同时对应修改label的for属性。

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