javascript - 使用 JavaScript 获取 widgetVar 或选中/取消选中所有其他 PrimeFaces 复选框

Question

我在一个页面上有几个 PrimeFaces 复选框。如果单击主复选框，则应选中/取消选中所有其他复选框。使用纯 HTML 复选框，这将是一个简单的问题。但是由于 PrimeFaces 不显示复选框本身，而是显示图像，因此以下 JavaScript 代码不起作用:

<script type="text/javascript">
$(document).ready(function() {
    var masterCheckbox = $(".ui-chkbox.master :checkbox");
    var slaveCheckboxes = $(".ui-chkbox:not(.master) :checkbox");

    updateMaster();
    masterCheckbox.change(updateSlaves);
    slaveCheckboxes.change(updateMaster);

    function updateMaster() {
        var allSlavesChecked = true;
        slaveCheckboxes.each(function() {
            if (!$(this).is(':checked')) {
                allSlavesChecked = false;
            }
        });
        masterCheckbox.attr("checked", allSlavesChecked);
    }

    function updateSlaves() {
        var masterChecked = masterCheckbox.is(":checked");
        slaveCheckboxes.each(function() {
            $(this).attr("checked", masterChecked);
        });
    }
});
</script>

我知道我可以使用 PrimeFaces widgetVar 来切换复选框，但我不知道如何使用 JavaScript 获取 PrimeFaces 小部件对象。我认为 RichFaces 将组件属性添加到 DOM 元素，但 PrimeFaces 没有。有人知道这个问题的解决方案吗？

Answer 1

你是对的——如果你像这样创建你的组件:

<p:selectBooleanCheckbox value="val" widgetVar="myCheckbox"/>

您只需引用其 widgetVar 即可访问该复选框，在本例中调用 PrimeFaces 客户端 API 将其标记为已选中:

<script>
   myCheckbox.check();
</script>

然后您可以将主复选框的 onchange 事件绑定(bind)到一个 javascript 方法，该方法根据主复选框的状态选中或取消选中所有“从属”复选框的状态(建议您将状态存储在隐藏字段中).

请注意，处理“更改”ajax 事件并在服务器端实现检查/取消检查逻辑可能会让您的生活更轻松。只需确保在 p:ajax 组件的更新属性中提供所有从属复选框的所有 ID:

<p:selectBooleanCheckbox id="masterChkBox" ...>
  <p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>