Я относительно новичок в веб-разработке и HTML-формах. В моем веб-приложении у меня есть список (из gpstracks), и у каждой записи в списке есть флажок, чтобы пользователь мог редактировать, удалять, загружать, что угодно … все выбранные треки одновременно. Чтобы повысить удобство использования, я хотел бы добавить кнопку «выбрать все» или флажок, который автоматически проверяет все остальные флажки в форме (желательно без перезагрузки всей формы).
Есть ли вообще возможность сделать это? Я пытался использовать
$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));
}
}
в сочетании со второй кнопкой типа «отправить», которая гласит «выбрать все». Очевидно, это перезагружает всю форму. Но после перезагрузки все флажки остаются непроверенными, поэтому метод setData, похоже, не имеет никакого эффекта.
Есть ли возможность программно установить флажки в форме, предпочтительно даже без перезагрузки всей формы?
Используя 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 %}