Question

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

Answer 1

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

将表单提交给服务器，点击复选框。
```
<t:selectBooleanCheckbox value="#{bean.selectAll}" onclick="submit()" />
```
然后选择/取消选中所有复选框的逻辑。
```
public void submit() {
    for (CheckboxItem item : checkboxItems) {
        item.setSelected(selectAll);
    }
}
```
警告：不是用户和开发人员友好。用户看到内容的闪烁，可能需要等待页面返回之前的一段时间。开发人员必须保留相同表单的所有输入，并且如果有的话，还需要使用JSF验证。

使用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。

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

1 个答案: