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

问题描述

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

I have several PrimeFaces checkboxes on a page. If you click the master checkbox, all other checkboxes should be checked/unchecked. With plain HTML checkboxes this would be an easy issue. But because PrimeFaces does not show the checkbox itself, but an image, the following JavaScript code does not work:

<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没有。有人知道这个问题的解决方案吗？

I know that I could use the PrimeFaces widgetVar to toggle the checkboxes, but I do not know how to get the PrimeFaces widget objects with JavaScript. I think RichFaces adds the component property to the DOM element, but PrimeFaces does not. Does somebody know a solution for this problem?

推荐答案

你是对的 - 如果你这样创建你的组件：

You were correct -- if you create your component like this:

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

您可以通过引用其widgetVar来访问该复选框，在这种情况下，调用PrimeFaces客户端用于将其标记为已选中的API：

You can access the checkbox simply by refering to its widgetVar, in this case calling the PrimeFaces client-side API to mark it as checked:

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

然后，您可以将主复选框的onchange事件绑定到检查或取消选中状态的javascript方法所有奴隶复选框取决于主复选框的状态（建议您将状态存储在隐藏字段中）。

You could then tie the onchange event of your master checkbox to a javascript method that checked or unchecked the state of all the "slave" checkboxes depending on the state of the master checkbox (would suggest you store the state in a hidden field).

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

Note, it may make your life easier to instead handle the "change" ajax event and implement the check/uncheck logic on the server side. Just make sure that you provide all the ids of all the slave checkboxes in the update attribute of the p:ajax component:

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

这篇关于使用JavaScript获取widgetVar或选中/取消选中所有其他PrimeFaces复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！