Установите и снимите флажки с одним флажком

Question

У меня есть два вида флажков. Один из них - простой флажок, например, t:selectBooleanCheckbox, а другой - динамически генерируемый список t:selectBooleanCheckbox. Я хочу контролировать этот список с помощью одного флажка. Например. когда он выбран или отменен, аналогичное действие должно выполняться и для списка.

Answer 1

В JSF 1.x есть два способа добиться этого.

1. Отправьте форму на сервер по щелчку флажка.

   <t:selectBooleanCheckbox value="#{bean.selectAll}" onclick="submit()" />
   

   И просто сделайте логику, чтобы установить / снять все флажки.

   public void submit() {
       for (CheckboxItem item : checkboxItems) {
           item.setSelected(selectAll);
       }
   }
   

   Предостережение: не дружит с пользователем и разработчиком. Пользователь видит вспышку контента и, возможно, придется подождать некоторое время, прежде чем страница вернется. Разработчик должен сохранить все входные данные одинаковой формы и хлопот с проверкой JSF, если таковые имеются.

2. Используйте JavaScript, чтобы творить чудеса полностью на стороне клиента.

   <t:selectBooleanCheckbox value="#{bean.selectAll}" onclick="selectAll(this)" />
   

   с

   function selectAll(checkbox) {
       var elements = checkbox.form.elements;
       for (var i = 0; i < elements.length; i++) {
           var element = elements[i];
           if (/checkboxId$/.test(element.id)) {
               element.checked = checkbox.checked;
           }
       }
   }
   

   Однако предполагается, что все элементы-флажки, сгенерированные вашим динамическим списком, имеют идентификатор, заканчивающийся checkboxId. Просто проверьте созданный источник HTML, чтобы определить шаблон. По крайней мере, вы знаете, в каком направлении вы должны смотреть сейчас.

О, не забудьте написать аналогичную логику, чтобы снять флажок «выбрать все», если не установлен один из флажков в списке.

В JSF 2.x вы, конечно, используете <f:ajax> вместо onclick.