如何在FreeMarker（Java）模板中正确显示复选框的勾选标记

我来帮你搞定这个问题！你遇到的复选框勾选标记变成问号的情况，大概率是字符编码不匹配导致的——U+2714这个对勾字符没有被正确解析和渲染，才会显示成占位的问号（U+003F）。下面是具体的排查和解决步骤：

1. 先确保页面的字符编码设置正确 #

首先在HTML的<head>里明确指定UTF-8编码，让浏览器用正确的编码解析页面内容：

<meta charset="UTF-8">

如果是Java后端输出页面，还要在响应头里设置编码：

response.setContentType("text/html; charset=UTF-8");

2. 检查FreeMarker的编码配置 #

FreeMarker默认的编码可能不是UTF-8，需要手动配置统一编码：

• 如果用配置文件（比如freemarker.properties），添加以下配置：

  default_encoding=UTF-8
  output_encoding=UTF-8
  

• 如果是代码里初始化Configuration对象，加上这两行：

  Configuration cfg = new Configuration(Configuration.VERSION_2_3_31);
  cfg.setDefaultEncoding("UTF-8");
  cfg.setOutputEncoding("UTF-8");
  

3. 绕过编码问题的替代方案 #

如果一时没法搞定编码，也可以直接用HTML实体或CSS来实现对勾显示：

用HTML实体替代对勾字符 #

把对勾直接写成HTML实体，这样不用依赖字符编码：

<!-- 对勾的HTML实体 -->
&#10004; 或者 &#x2714;

如果想显示“X”，可以用：

× 或者直接写 X

用CSS伪元素自定义勾选样式 #

这种方式完全绕过字符编码问题，直接用CSS生成对勾：

/* 隐藏原生复选框 */
input[type="checkbox"] {
  appearance: none;
  position: absolute;
  opacity: 0;
}

/* 勾选时在标签前显示对勾 */
input[type="checkbox"]:checked + label::before {
  content: "\2714";
  color: #000;
  margin-right: 6px;
}

/* 未勾选时的样式（可选） */
input[type="checkbox"] + label::before {
  content: "\2610";
  margin-right: 6px;
}

然后你的模板代码可以保持不变，CSS会自动处理勾选标记的显示。

4. 检查模板文件本身的编码 #

最后别忘了确认你的.ftl模板文件是用UTF-8编码保存的——很多IDE默认编码可能不是UTF-8，需要在IDE的文件编码设置里把.ftl文件的编码改成UTF-8，避免文件本身的字符被损坏。

按照上面的步骤排查，应该就能解决问号显示的问题啦！

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