HTML 多项选择：复选框

Posted 2021-05-24

<fieldset class="multichoice">
	<legend>$1</legend>
	<div class="checkbox"><input type="checkbox" id="$2" name="$2" /><label for="$2">$3</label></div>
	<div class="checkbox"><input type="checkbox" id="$4" name="$4" /><label for="$4">$5</label></div>
	<div class="checkbox"><input type="checkbox" id="$6" name="$6" /><label for="$6">$7</label></div>$8
</fieldset>

渲染 django 表单多项选择

【中文标题】渲染 django 表单多项选择

【英文标题】：Render django form multiplechoice

【发布时间】：2019-03-17 20:19:09

【问题描述】：

我一直在网上搜索如何将颜色/主题应用于 django 中的复选框表单项，但找不到如何做到这一点。

我想做的事情可能很容易，但是尽管我红了所有的主题和博客，但我仍然无法做到。

这是我的简化表格：

class MyForm(forms.Form):

    def __init__(self, data, *args, **kwargs):
        super(MyForm, self).__init__(data, *args, **kwargs)
        self.fields['checkbox'] = forms.MultipleChoiceField(
            label='Set of questions to know you better',
            required=True,
            widget=forms.CheckboxSelectMultiple(attrs='disabled': 'disabled'),
            choices=((1, 'Proposition 1'), (2, 'Proposition 2'), (3, 'Proposition 3'), (4, 'Proposition 4')),
            initial=(1, 2, 4,)
            )

我想知道我应该如何修改我目前看起来像的 html

<form action="% url 'dummy' %" method="post">

    % csrf_token %
     form.as_p 

</form>

以便所有 initial 设置为 True 的选项都应用给定的 css，而那些设置为 False 的选项则是另一个。

希望我的问题有意义。如果没有请不要犹豫。

最佳：

埃里克

当前渲染的添加：

编辑：添加生成的 html

<form action="/dummy" method="post">

    <input type='hidden' name='csrfmiddlewaretoken' value='LGZ0mwqrAKxb7CzFvOyYIyUIcDSARy4iwEtHVDjKPpnBd1AIXlk4UyxRuCSIEviY' />
    <p><label>Set of questions to know you better :</label> <ul id="id_checkbox">
    <li><label for="id_checkbox_0"><input type="checkbox" name="checkbox" value="1" disabled="disabled" id="id_checkbox_0" checked />
 Proposition 1</label>

</li>
    <li><label for="id_checkbox_1"><input type="checkbox" name="checkbox" value="2" disabled="disabled" id="id_checkbox_1" checked />
 Proposition 2</label>

</li>
    <li><label for="id_checkbox_2"><input type="checkbox" name="checkbox" value="3" disabled="disabled" id="id_checkbox_2" />
 Proposition 3</label>

</li>
    <li><label for="id_checkbox_3"><input type="checkbox" name="checkbox" value="4" disabled="disabled" id="id_checkbox_3" checked />
 Proposition 4</label>

</li>
</ul></p>

</form>

【问题讨论】：

@VaibhavVishal 嗨。谢谢你的关注。我刚刚添加了一个屏幕截图，说明它现在的样子。

在您提供的屏幕截图中，没有选中任何复选框，所以我猜没有一个初始设置为 True。正常吗？

@VaibhavVishal 我刚刚添加了 html。

@May.D 你是对的。这不正常。它曾经工作过。我会看看我可能做了什么改变以使它停止工作。

@VaibhavVishal 对不起。我的错。我刚刚添加了它。

【参考方案1】：

如果你需要样式化检查输入，你可以使用CSS伪类:checked，这样：

input:checked 
  /*some code here */

但是，如果您需要有条件地向输入添加类，您可以在实例化表单并覆盖 create_option 方法的视图中执行此操作，但我认为创建自定义模板标签并使用它更容易。您可以尝试以下方法：

from django import template

@register.filter
def add_css(checkbox_input):
    checkbox_input.data['attrs'].update("class":"your-class")
    return checkbox_input

然后在模板中

% for x in form.checkbox %
    % if x.data.selected %
         x|add_css 
    % else %
        x 
    % endif %
% endfor %

【参考方案2】：

尝试基于CheckboxSelectMultiple 创建一个新的Widget，覆盖create_option 方法。

如果选择了选项，则添加一个新的类属性。

def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
    [..]
    if selected:
        option_attrs.update(self.checked_attribute)
        # add your class here to option_attrs
    [..]

【讨论】：

看起来不错。你会把@May.D 建议的东西，即checkbox_input.data['attrs'].update("class":"your-class")，放在你添加的地方？对吗？

你只需要设置：option_attrs.update('class': 'yourclass').

好吧有道理。感谢您的帮助。