Symfony2如何渲染复选框？答案

【问题标题】：Symfony2 how to render Checkboxes?Symfony2如何渲染复选框？
【发布时间】：2011-12-19 22:36:51
【问题描述】：

我有一个包含多个国家/地区选择列表的表单生成器表单。当我像这样在表单上呈现它们时：

{{ form_widget(edit_form.countries) }}

它们看起来像这样：

<input type="checkbox" name="..." value="AD" /><label for="...">Andorra</label>
<input type="checkbox" name="..." value="AE" /><label for="...">United Arab Emirates</label>
<input type="checkbox" name="..." value="AF" /><label for="...">Afghanistan</label>

我希望每个选项在浏览器中单独显示在一行上，而不是全部显示在一行中。如何在选项周围或之间注入 html？或者有没有 CSS 方法可以做到这一点？

谢谢。

【问题讨论】：

标签： symfony choice formbuilder

【解决方案1】：

来自 Symfony 文档

你基本上需要做的是重载 checkbox_widget 块。

{% form_theme form _self %}

{% block checkbox_widget %}
{% spaceless %}
    <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />
{% endspaceless %}
{% endblock checkbox_widget %}

当然，您可以使用 CSS 将小部件放在自己的行中（但这不是 Symfony2 的问题）。

【讨论】：

谢谢，我没有找到非常清楚的文档。感谢您的回答。
我发现这种呈现复选框的其他方式也很有帮助：stackoverflow.com/a/13546572/199712
@JasonSwett 取决于您要实现的目标。在您链接的答案中单独显示建议的字段会强制您在要使用复选框的任何地方复制相同的 html sn-ps。在某些情况下它可能很有用，即当您没有一致的方式显示复选框时。大多数情况下，最好将此块定义一次，尤其是在它始终相同的情况下。
对。在某些情况下，此答案可能会有所帮助，而在其他情况下，我链接的答案可能会有所帮助。
扩展小部件时标签的行为是什么？我还想将标签添加到周围的

【解决方案2】：

我发现这样做的一种更懒惰的方法是遍历表单/选择数组。

最简单的，渲染一个你可能会做的表单：

{{ form_widget(form) }}

为了更详细一点，您可以这样做：

{{ form_row(form.itemA) }}
{{ form_row(form.itemB) }}
{{ form_row(form.itemC) }}

但是，如果“itemA”是一个多选选项，您就会被困在同一行渲染的整个列表中。如果您在进行主题化之前只是希望获得更多的粒度，您可以这样做：

{% for t in form.itemA %}
{{ form_row(t) }}
{% endfor %}

这会将每个复选框呈现在自己的行上，或者让您有机会在每个项目之间做任何您想做的事情。

【讨论】：

【解决方案3】：

正如 Kuba 在他的回答中所说，这在一定程度上听起来像是一个 CSS 问题。从语义上讲，注入 <br /> 标签之类的东西没有多大意义，但如果您愿意，可以按照 Kuba 回答中的文档进行操作。

如果你想编写一些 CSS 来让这些元素逐行显示，你可以使用它来对抗 symfony 的默认输出：

input, label {
    float: left;
}

input {
    clear: left;
}

当然，这实际上会导致所有输入和标签标签向左浮动，这可能不适合您，因此您可以 a) 将复选框包装在另一个 div 中并使用 css 子选择器，例如.checkboxes input, .checkboxes label 或 b) 将自定义 css 类应用到您的小部件，使用：

{{ form_widget(form.name, { 'attr': {'class': 'foo'} }) }}

CSS 将是相同的，但不是 input，而是 .foo。

【讨论】：