在 symfony 的复选框列表中添加 select all 选项
Add a select all option to a list of checkboxes in symfony
我对网络开发和 html 表单比较陌生。在我的网络应用程序中,我有一个(gpstracks 的)列表,每个列表条目都有一个复选框,因此用户可以编辑、删除、下载等等……一次选择所有曲目。为了提高可用性,我想添加一个 "select all" 按钮或复选框,它会自动选中表单中的所有其他复选框(最好不重新加载整个表单)。
有没有可能做到这一点?我一直在尝试使用
$builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) use ($tracks){
$form = $event->getForm();
foreach($tracks as $track)
{
$form->get($track->getId())->setData(array('checked'=>true));
}
}
与 'submit' 类型的第二个按钮结合使用 'select all'。显然,这会重新加载整个表单。但是重新加载后所有复选框都没有选中,所以setData方法似乎根本没有效果。
是否有任何选项可以以编程方式选中表单中的复选框,最好甚至不重新加载整个表单?
- 为复选框设置htmlclass(在表单生成器中设置选项属性['class'])
- 添加其他按钮 class
- 添加事件以捕获按钮 2 上的点击,并检查复选框
http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery
使用jquery:
// cerad.js
Cerad = {};
Cerad.checkboxAll = function(e)
{
var nameRoot = $(this).attr('name'); // "refSchedSearchData[ages][]";
nameRoot = nameRoot.substring(0,nameRoot.lastIndexOf('['));
var group = 'input[type=checkbox][name^="' + nameRoot + '"]';
var checked = $(this).prop('checked') ? true : false;
$(group).prop('checked', checked);
};
{# searchform.html.twig #}
{# form.dates is an array of form check boxes #}
{% if form.dates is defined %}
{% set items = form.dates %}
<td>{% include '@CeradGame/Project/Schedule/Twig/ScheduleSearchCheckboxes.html.twig' %}</td>
{% endif %}
{# ScheduleSearchCheckboxes.html.twig #}
{# render one set of check boxes as a table #}
{# Setting a class on the first item #}
<table border="1">
<tr><th colspan="30">{{ items.vars.label }}</th></tr>
<tr>
{% set itemFirst = true %}
{% for item in items %}
<td align="center">{{ form_label(item) }}<br />
{% if itemFirst %}
{{ form_widget(item, { 'attr': {'class': 'cerad-checkbox-all' }}) }}
{% set itemFirst = false %}
{% else %}
{{ form_widget(item) }}
{% endif %}
</td>
{% endfor %}
<tr>
</table>
// Grab all the cerad-checkbox-all elements and pass to Cerad.checkboxAll
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function()
{
// checkbox all functionality
$('.cerad-checkbox-all').change(Cerad.checkboxAll);
});
</script>
{% endblock %}
我对网络开发和 html 表单比较陌生。在我的网络应用程序中,我有一个(gpstracks 的)列表,每个列表条目都有一个复选框,因此用户可以编辑、删除、下载等等……一次选择所有曲目。为了提高可用性,我想添加一个 "select all" 按钮或复选框,它会自动选中表单中的所有其他复选框(最好不重新加载整个表单)。
有没有可能做到这一点?我一直在尝试使用
$builder->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) use ($tracks){
$form = $event->getForm();
foreach($tracks as $track)
{
$form->get($track->getId())->setData(array('checked'=>true));
}
}
与 'submit' 类型的第二个按钮结合使用 'select all'。显然,这会重新加载整个表单。但是重新加载后所有复选框都没有选中,所以setData方法似乎根本没有效果。
是否有任何选项可以以编程方式选中表单中的复选框,最好甚至不重新加载整个表单?
- 为复选框设置htmlclass(在表单生成器中设置选项属性['class'])
- 添加其他按钮 class
- 添加事件以捕获按钮 2 上的点击,并检查复选框 http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery
使用jquery:
// cerad.js
Cerad = {};
Cerad.checkboxAll = function(e)
{
var nameRoot = $(this).attr('name'); // "refSchedSearchData[ages][]";
nameRoot = nameRoot.substring(0,nameRoot.lastIndexOf('['));
var group = 'input[type=checkbox][name^="' + nameRoot + '"]';
var checked = $(this).prop('checked') ? true : false;
$(group).prop('checked', checked);
};
{# searchform.html.twig #}
{# form.dates is an array of form check boxes #}
{% if form.dates is defined %}
{% set items = form.dates %}
<td>{% include '@CeradGame/Project/Schedule/Twig/ScheduleSearchCheckboxes.html.twig' %}</td>
{% endif %}
{# ScheduleSearchCheckboxes.html.twig #}
{# render one set of check boxes as a table #}
{# Setting a class on the first item #}
<table border="1">
<tr><th colspan="30">{{ items.vars.label }}</th></tr>
<tr>
{% set itemFirst = true %}
{% for item in items %}
<td align="center">{{ form_label(item) }}<br />
{% if itemFirst %}
{{ form_widget(item, { 'attr': {'class': 'cerad-checkbox-all' }}) }}
{% set itemFirst = false %}
{% else %}
{{ form_widget(item) }}
{% endif %}
</td>
{% endfor %}
<tr>
</table>
// Grab all the cerad-checkbox-all elements and pass to Cerad.checkboxAll
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function()
{
// checkbox all functionality
$('.cerad-checkbox-all').change(Cerad.checkboxAll);
});
</script>
{% endblock %}