如何在Django表单的单选按钮label标签中嵌入图片

1. 修复基础代码错误 #

修正models.py #

原CHOICES定义格式错误，单元素元组必须加尾逗号，TRUE 改为Django合法布尔值 True：

class Asset(models.Model):
    ASSET_TYPE = (('Motor Vehicle','Motor Vehicle'),)
    asset = models.CharField(max_length=200, choices=ASSET_TYPE, null=True)

修正forms.py #

首先导入模型层定义的ASSET_TYPE，initial参数要和选项实际值匹配，不能填写无效值0：

from .models import Asset

asset = forms.ChoiceField(
    choices=Asset.ASSET_TYPE, 
    initial='Motor Vehicle', 
    widget=forms.RadioSelect(attrs={'class':'form-check-inline'})
)

不要在widget上全局设置id，避免和渲染后的多选项id冲突。

2. 调整模板实现带图片的label效果 #

首先模板开头要加载静态文件标签，手动渲染时保证单选框id和label的for属性匹配，隐藏原生单选框，用label承载图片和文字实现点击交互：

{% load static %}
<div class="container asset">
  <div class="row">
    <div class="col">
      <div class="item">
        {{ form.asset.0.tag }}
        <label for="{{ form.asset.0.id_for_label }}">
          <img src="{% static 'Asset/Motor Vehicle.png' %}" alt="机动车">
          <strong>Motor Vehicle</strong>
        </label>
      </div>
    </div>
  </div>
</div>

上述写法可以保留Django表单自带的错误提示、默认值回填能力，无需手动硬编码表单属性。

3. 补充CSS实现选中样式 #

可以添加以下CSS实现选中label时的高亮效果，匹配预期设计：

/* 隐藏原生单选框 */
.item input[type="radio"] {
  display: none;
}
/* label默认样式 */
.item label {
  display: inline-block;
  padding: 10px;
  border: 2px solid #eee;
  border-radius: 8px;
  cursor: pointer;
}
/* 选中后label样式 */
.item input[type="radio"]:checked + label {
  border-color: #0d6efd;
  background-color: #f0f7ff;
}

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