Primefaces: essayer de sélectionner toutes les cases à l'aide de jquery et selectBooleanCheckbox

Je suis en train de mettre en œuvre une Sélectionnez la case Tout en utilisant des composants primefaces p:selectBooleanCheckbox et jquery.

Voici mon code:

<p:selectBooleanCheckbox id="selectAll" onchange="selectAll(this);" itemLabel="select all"/><br/><br/>
<p:selectBooleanCheckbox id="test1" itemLabel="test1"/><br/>
<p:selectBooleanCheckbox id="test2" itemLabel="test2"/><br/>
<p:selectBooleanCheckbox id="test3" itemLabel="test3"/><br/>
<p:selectBooleanCheckbox id="test4" itemLabel="test4"/><br/>
<input type="checkbox" id="test5">test5</input><br/>
<input type="checkbox" id="test6">test6</input><br/>
<input type="checkbox" id="test7">test7</input><br/>

Et la selectAll fonction javascript:

function selectAll(checkAll) {
    var checked = checkAll.checked;      
    $(':checkbox[id*="test"]').attr('checked', checked);
}

Lorsque je sélectionne le selectAll case à cocher uniquement les cases 5, 6 et 7 sont vérifiées.
Utilisation Autonome j'ai pu vérifier le code généré et il semble que les autres cases à cocher sont également vérifiées (checked = "checked"), même s'ils ne sont pas affichés vérifié.

J'ai aussi essayé:

function selectAll(checkAll) {
    var checked = checkAll.checked;                  
    $(':checkbox[id*="test"]').click();
}

Et il ne fonctionne pas.

J'ai seulement ajouté ces HTML cases à cocher pour tester mon jquery. Juste pour être sûr qu'elle était au travail.

Je suis à l'aide de Primefaces 3.0 et Tomcat 6.0.20.

Quelqu'un peut m'aider? Merci à l'avance.

Pourquoi êtes-vous de mélange de HTML et de JSF cases à cocher?
juste pour tester mon jquery. pour garantir qu'il fonctionne.
mais le sélecteur jquery id*= macthes une partie de l'id.

OriginalL'auteur sabrina.bettini | 2012-01-13

Le problème était avec les classes de style primefaces utilise, une fois la case elle-même était en cours de vérification.

Pour le résoudre j'ai dû changer la fonction javascript. Maintenant, il ressemble à ceci:

function selectAll(checkAll) {
    var checked = checkAll.checked; 

    //to change the checked attribute                
    $(':checkbox[id*="test"]').attr('checked', checked);

    if (checked) {
        $('div[id*="test"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon ui-icon-check');
        });
    } else {
        $('div[id*="test"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon ui-icon-check');
        });
    }
}

C'était une question de l'affichage de la sélection de la case à cocher. Et dans ce cas, comme je l'ai été à l'aide de primefaces, c'était une affaire de styles.

Merci pour ceux qui ont essayé de m'aider.

OriginalL'auteur sabrina.bettini

Si cela peut être utile pour quelqu'un, j'ai fait ce code pour DÉSÉLECTIONNER tous les boutons de la radio à partir d'un formulaire,,,

J'ai besoin parce que j'ai eu un panneau accordéon et dans chaque onglet, j'avais un selectOneRadio, mais lorsque l'on passe d'un onglet j'ai besoin pour désélectionner tous les autres de la table de radios.

Vous pouvez sauter Id personnalisés et bien sûr, vous passez à la radio en cours de vérification

PrimeFaces 4.0

<p:selectOneRadio onchange="workThere(this)"

Et ici la fonction

        function workThere(e) {
            //alert(e.type + ' - ' + e.parentNode.type);
            var radios = jQuery("input:radio:checked");

            for (var i = 0; i  &lt; radios.length; i++) {
                //escape currentId
                if( (radios[i].id.indexOf(e.id)) &gt; -1 ){
                    continue;
                }
                //escape seleccionador de tipo
                if( (radios[i].id.indexOf('inputTipoLtg')) &gt; -1 ){
                    continue;
                }

                $(radios[i].parentNode.parentNode.children[1]).removeClass('ui-state-active');
                $(radios[i].parentNode.parentNode.children[1]).children('span').removeClass('ui-icon ui-icon-bullet');
                $(radios[i]).attr('checked', false);

            }                                
        }
        ;

OriginalL'auteur Jukar Penz

0

Sabrina! Merci beaucoup de me pointer dans la bonne direction. Le noeud du problème comme vous l'avez souligné, c'est que le PF cases à cocher ne sont pas résolus JSF cases - de leur état est implicite par leurs styles n'est pas un état que vous pouvez faire une requête avec toute case de la méthode comme value() ou checked(). C'est un peu trompeur, mais il est plus souple des cases à cocher. Si astucieux d'utiliser .children() et .add/removeClass() méthodes, je n'aurais pas pensé.

Pour PF 6.1, j'ai dû modifier votre code un peu. La différence entre le activée et désactivée état était la présence/absence de l'ui-state-style actif sur le contenant <div> boîte et de ui-icon-vérifié et ui-icon-vierge sur les contenus <span>.
```
 function selectAll(checkAll) {
    var checked = checkAll.checked; 
    //to change the checked attribute                
    $(':checkbox[id*="cloneCheckBox"]').attr('checked', checked);
    if (checked) {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).addClass('ui-state-active');
            $(this).children('span').addClass('ui-icon-check');
            $(this).children('span').removeClass('ui-icon-blank');
        });
   } else {
        $('div[id*="cloneCheckBox"] > div').each(function() {
            $(this).removeClass('ui-state-active');
            $(this).children('span').removeClass('ui-icon-check');
            $(this).children('span').addClass('ui-icon-blank');
        });
    }
}
```
J'espère que cela aide quelqu'un à l'aide de versions ultérieures de PF. Je déteste faire tout ce qui est ajax trafic pour des fonctionnalités purement côté client.

Ce qui m'inquiète à propos de ce PF départ de l'utilisation de JSF case dérivés, c'est que ce Javascript pourrait se briser si vous changez de thème et de classes différentes sont utilisées.
Eh bien, je suis mal. Il est à l'intérieur de la div avec les styles d'un <input> élément de type case à cocher, et votre code appelle une méthode sur que. Mais il n'est toujours pas suffisant de se contenter de définir l'état de cet élément pour le PF, des cases à cocher.

OriginalL'auteur snakedog
-1

jQuery ne sait pas que p:selectBooleanCheckbox est d'être traitée comme une case à cocher. En conséquence de cela, la :checkbox sélecteur de ne pas le reconnaître.

Vous pourriez aussi envisager d'utiliser ^= au lieu de *= dans le sélecteur d'attributs pour l'id, si vous ne voulez correspondre id début avec "test" et non pas quelque chose comme id="footestbar".

Mais n'est-il pas rendu comme un input de type checkbox? parce que comme je l'ai mentionné l'autonome shpws les cases à cocher activée.
comme le primefaces génère un id, je veux tester si une partie de l'id est "test".
"Mais n'est-il pas rendu comme un input de type checkbox?" - Je ne sais pas, dis le moi! 😉 Je ne peux pas l'essayer parce que je n'ai pas d'expérience avec soit Primefaces ou Tomcat.
Voici le code qu'il génère: <input id="formConteudo:test1_input" type="checkbox" name="formConteudo:test1_input" checked="checked">
Hmm... eh Bien, qui semble bien en effet... Si les cases à cocher s'affichent correctement, mais ils n'ont pas vérifié?

OriginalL'auteur Connum

Vous devez vous connecter pour publier un commentaire.