Django - 在模板中单独渲染 CheckboxSelectMultiple() 小部件（手动）

Django

使用 Django 框架开发 Web 应用程序时，经常会用到表单和表单小部件。其中的 CheckboxSelectMultiple() 小部件是一个常见的选择多个选项的小部件。默认情况下，Django 在模板中渲染这个小部件时会将选项以列表形式呈现。然而，有时我们可能希望单独渲染 CheckboxSelectMultiple() 小部件的每个选项，这样可以更灵活地控制页面的布局和样式。

为了实现在模板中单独渲染 CheckboxSelectMultiple() 小部件，我们可以手动处理渲染过程。首先，我们需要在视图中创建一个表单实例，并将 CheckboxSelectMultiple() 小部件作为相应字段的小部件。然后，我们可以通过遍历表单字段的选项，手动渲染每个选项的 HTML 代码，以实现单独渲染的效果。

下面是一个简单的示例，展示了如何在模板中单独渲染 CheckboxSelectMultiple() 小部件的选项：

Python
# forms.py
from Django import forms
class MyForm(forms.Form):
    OPTIONS = [
        ('option1', 'Option 1'),
        ('option2', 'Option 2'),
        ('option3', 'Option 3'),
    ]
    my_field = forms.MultipleChoiceField(
        widget=forms.CheckboxSelectMultiple(),
        choices=OPTIONS
    )

html
<!-- template.html -->
{% for option in form.my_field %}
    <input type="checkbox" name="{{ form.my_field.html_name }}" value="{{ option.value }}" id="{{ option.id_for_label }}">
    <label for="{{ option.id_for_label }}">{{ option.choice_label }}</label>
{% endfor %}

在上面的示例中，我们创建了一个名为 MyForm 的表单类，其中包含一个 MultipleChoiceField 字段 my_field。这个字段使用 CheckboxSelectMultiple() 小部件，并提供了三个选项。

在模板中，我们使用 for 循环遍历 form.my_field，对每个选项手动渲染了一个复选框和对应的标签。通过设置正确的 name、value、id 和 for 属性，我们确保了表单数据能够正确地传递到后台。

这样，当我们在模板中渲染 MyForm 实例时，CheckboxSelectMultiple() 小部件的选项将被单独渲染，而不是作为一个整体呈现。

示例代码：

Python
# forms.py
from Django import forms
class MyForm(forms.Form):
    OPTIONS = [
        ('option1', 'Option 1'),
        ('option2', 'Option 2'),
        ('option3', 'Option 3'),
    ]
    my_field = forms.MultipleChoiceField(
        widget=forms.CheckboxSelectMultiple(),
        choices=OPTIONS
    )

html
<!-- template.html -->
{% for option in form.my_field %}
    <input type="checkbox" name="{{ form.my_field.html_name }}" value="{{ option.value }}" id="{{ option.id_for_label }}">
    <label for="{{ option.id_for_label }}">{{ option.choice_label }}</label>
{% endfor %}

以上就是如何在 Django 模板中单独渲染 CheckboxSelectMultiple() 小部件的选项的方法。通过手动处理渲染过程，我们可以更灵活地控制页面的布局和样式，提升用户体验。