选中并取消选中单个复选框的复选框列表

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;
           }
       }
   }
   

   但是,假设您的动态列表生成的所有复选框元素的ID都以checkboxId.结尾.只需检查生成的HTML源代码以发现模式.你至少知道你现在应该朝哪个方向看.

哦,不要忘记编写类似的逻辑,以便在取消选中列表中的一个复选框时取消选中"全选"复选框.

使用JSF 2.x,您当然可以使用<f:ajax>而不是onclick.