jQuery如何遍历数组逐行展示所有已选中checkbox的取值？

• 使用.text()方法渲染内容时，所有内容都会被作为纯文本处理，你写入的<br>不会被解析为换行标签，只会直接显示为字符
• 直接拼接数组和<br>的写法只会在整个数组末尾加一次换行，无法给每个元素单独加换行

快速适配方案（最小改动你的原有代码） #

仅需修改赋值的最后一行代码即可：

$('#generate').on('click', function() {
      var array = [];
      $("input:checked").each(function() {
        array.push($(this).val());
      });
      // 替换原来的text()为html()，用join('<br>')给每个元素之间加换行标签
      $("#selectedSubject").html(array.join('<br>')); 
});

语义化优化方案（方便后续加样式） #

如果需要给每个选中项设置独立样式，推荐输出列表结构：

$('#generate').on('click', function() {
      var itemHtml = [];
      $("input:checked").each(function() {
        // 把每个值包裹为li标签
        itemHtml.push(`<li>${$(this).val()}</li>`);
      });
      // 组装为ul列表插入到目标节点
      $("#selectedSubject").html(`<ul>${itemHtml.join('')}</ul>`); 
});

如果不想显示列表默认的圆点样式，可以给#selectedSubject ul加CSS：list-style: none; padding-left: 0;即可。

内容的提问来源于stack exchange，提问作者Teh Boon Hin