Obtenir widgetVar avec JavaScript ou cochez/décochez toutes les autres cases PrimeFaces

J'ai plusieurs PrimeFaces cases à cocher sur une page. Si vous cliquez sur la case à cocher maître, toutes les autres options doivent être activées ou désactivées. Avec HTML cases à cocher ce serait une question facile. Mais parce que PrimeFaces ne montre pas de la case elle-même, mais une image, le code JavaScript suivant ne fonctionne pas:

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

Je sais que je pourrais utiliser le PrimeFaces widgetVar pour basculer les cases à cocher, mais je ne sais pas comment pour obtenir le PrimeFaces widget objets avec JavaScript. Je pense que RichFaces ajoute la propriété d'un composant de l'élément du DOM, mais PrimeFaces ne le fait pas. Ne quelqu'un connais une solution pour ce problème?

OriginalL'auteur Joel Richard | 2012-07-11

  1. 7

    Vous aviez raison, si vous créez votre composant comme ceci:

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

    Vous pouvez accéder à la case à cocher simplement en se référant à son widgetVar, dans ce cas, l'appel de la PrimeFaces API côté client pour le marquer comme vérifié:

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

    Vous pouvez ensuite attacher l'événement onchange de votre maître de case à cocher pour une méthode javascript activé ou désactivé à l'état de tous les "esclaves" des cases à cocher en fonction de l'état de la case à cocher maître (vous suggérons de stocker l'état dans un champ caché).

    Remarque, il peut rendre votre vie plus facile au lieu de gérer le "changement" ajax événement et de mettre en œuvre la cocher/décocher la logique côté serveur. Assurez-vous de fournir tous les id de tous les esclaves des cases à cocher dans la mise à jour de l'attribut p:ajax composant:

    <p:selectBooleanCheckbox id="masterChkBox" ...>
  <p:ajax event="change" listener="#{yourBean.handleMasterChange}" update="...all slavecheckbox ids..."/>
</p:selectBooleanCheckbox>
    Oui, enfin, je l'ai fait comme vous l'avez suggéré. Avant que j'ai eu l'idée de parcourir toutes les propriétés de la fenêtre, recherchez le widget_* propriétés et vérifiez si elles appartiennent à une case à cocher...

    OriginalL'auteur BestPractices