用单个复选框选择和取消选中复选框列表

Question

我有两种复选框。一个是简单的复选框，例如t:selectBooleanCheckbox，另一个是动态生成的t:selectBooleanCheckbox列表。我想用单个复选框来控制这个列表。例如。当它被选中或取消选定时，也应对列表进行类似的操作。

Answer 1

使用JSF 1.x有两种方法可以实现这一点。

1. 将该表单提交到服务器onclick复选框。

   <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结尾的ID。只需检查生成的HTML源代码即可发现该模式。你至少知道你现在应该看哪个方向。

哦，不要忘了写类似的逻辑来取消选择“全选”复选框，只要在列表中的复选框中的一个没有被选中。

使用JSF 2.x，你当然会使用<f:ajax>而不是onclick。