Django中MultipleChoiceField与文本输入框关联实现问询

当然可以实现！默认的MultipleChoiceField只能存储选中的选项值，但要给每个选项关联输入框并保存对应内容，我们需要换个思路——用JSONField来存储选项-输入内容的键值对，再自定义Admin的表单和组件来实现交互。下面是具体步骤：

1. 修改模型结构 #

首先，把原来的MultipleChoiceField替换成JSONField，用来存储选中选项及其对应输入的内容。同时保留选项常量供后续使用：

# models.py
from django.db import models

# 定义你的多选选项常量
MY_CHOICES = [
    ('email', '发送邮件'),
    ('sms', '发送短信'),
    ('push', '推送通知'),
]

class NotificationSetting(models.Model):
    # 用JSONField存储选项和对应输入，默认空字典
    notification_options = models.JSONField(default=dict)

    def __str__(self):
        return f"通知设置: {self.notification_options}"

2. 自定义表单Widget #

我们需要一个自定义Widget，用来渲染每个选项的复选框+文本输入框组合。这个Widget会遍历选项列表，为每个选项生成对应的HTML元素：

# forms.py
from django.forms import Widget
from django.utils.safestring import mark_safe

class MultiChoiceWithInputWidget(Widget):
    template_name = 'widgets/multi_choice_with_input.html'

    def __init__(self, choices, attrs=None):
        super().__init__(attrs)
        self.choices = choices

    def get_context(self, name, value, attrs):
        context = super().get_context(name, value, attrs)
        # 确保value是字典，避免空值报错
        value = value or {}
        # 把选项和已保存的输入值传入模板
        context['choices'] = [
            {
                'value': choice_value,
                'label': choice_label,
                'input_value': value.get(choice_value, '')
            }
            for choice_value, choice_label in self.choices
        ]
        return context

配套的模板文件templates/widgets/multi_choice_with_input.html：

{% for choice in choices %}
<div style="margin: 8px 0;">
    <input type="checkbox" 
           name="{{ widget.name }}_choices" 
           id="{{ widget.attrs.id }}_{{ choice.value }}" 
           value="{{ choice.value }}"
           {% if choice.value in widget.value %}checked{% endif %}>
    <label for="{{ widget.attrs.id }}_{{ choice.value }}">{{ choice.label }}</label>
    <input type="text" 
           name="{{ widget.name }}_{{ choice.value }}" 
           value="{{ choice.input_value }}"
           style="margin-left: 8px; padding: 4px;"
           placeholder="输入对应内容">
</div>
{% endfor %}

3. 自定义表单字段 #

接下来创建一个自定义表单字段，用上面的Widget，并且处理提交的数据，把选中的选项和对应输入整理成字典：

# forms.py
from django.forms import Field

class MultiChoiceWithInputField(Field):
    widget = MultiChoiceWithInputWidget

    def __init__(self, choices, **kwargs):
        super().__init__(**kwargs)
        self.widget.choices = choices

    def clean(self, value):
        # 这里的value是一个QueryDict，包含所有提交的表单数据
        cleaned_data = {}
        # 获取选中的选项
        selected_choices = value.getlist(f"{self.name}_choices")
        for choice_value in selected_choices:
            # 获取对应选项的输入内容
            input_value = value.get(f"{self.name}_{choice_value}", '').strip()
            if input_value:
                cleaned_data[choice_value] = input_value
        return cleaned_data

4. 在Admin中使用自定义表单 #

最后，在Admin里注册模型时，使用我们自定义的表单，替换默认的字段：

# admin.py
from django.contrib import admin
from .models import NotificationSetting, MY_CHOICES
from .forms import MultiChoiceWithInputField

class NotificationSettingAdminForm(admin.ModelForm):
    # 用自定义字段替换默认的JSONField
    notification_options = MultiChoiceWithInputField(choices=MY_CHOICES)

    class Meta:
        model = NotificationSetting
        fields = '__all__'

@admin.register(NotificationSetting)
class NotificationSettingAdmin(admin.ModelAdmin):
    form = NotificationSettingAdminForm
    # 列表页可以显示存储的JSON内容
    list_display = ('__str__', 'notification_options')

这样配置后，在Django Admin中打开NotificationSetting的编辑页面，就能看到每个选项旁边带一个文本输入框。用户选中选项并输入内容后，提交的数据会被整理成字典，保存到notification_options这个JSONField里。

额外说明 #

• 如果需要对输入内容做验证（比如邮箱格式、手机号格式），可以在MultiChoiceWithInputField的clean方法里针对不同选项添加验证逻辑。
• 如果你不想用JSONField，也可以用TextField存储序列化后的字典，但JSONField更方便Django查询和处理。

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