checkbox qui coche tous les checkbox d'une table

Version imprimable

Bonjour,

voila, j'ai une liste ou chaque ligne a une checkbox, j'aimerai pouvoir, en cliquant sur la checkbox en tête de colonne, sélectionner toute les checkbox de ma liste sans intervenir au niveau des beans, auriez vous une idée ???

voila mon code si cela peut vous inspirer :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <rich:dataTable reRender="sc2" align="center" width="100%" id="carList" rowClasses="tr2" rows="#{navigationBean.rowsShowed}" value="#{listBean.services}" var="service" > <rich:column > <f:facet name="header"> <h:selectBooleanCheckbox value="#{service.allSelected}"> <a4j:support event="onkeyup" reRender="check"/> </h:selectBooleanCheckbox> </f:facet> <h:selectBooleanCheckbox id="check" value="#{service.selected}"> <a4j:support event="onkeyup"/> </h:selectBooleanCheckbox> </rich:column>
merci d'avance ;)

18/09/2008, 09h35
Sniper37
tu peux le faire en javascript mais le mieux c'est de le faire avec ajax
Code:

1 2 3 <a4j:support event="onclick" action="#{bean.selectAllRows}"reRender="table"> </a4j:support>
et dans la fonction selectAllRows tu donne aux checkBox les valeurs souhaités..
18/09/2008, 17h32
solarien

pourrais tu me guider stp pour le faire en java script
18/09/2008, 17h34
Sniper37

pour ça..pose ta question dans le forum javascript

J'ai implémenté cela sur mon tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function selectAllCheckboxes(mainCheckbox) {
    var name = mainCheckbox.name;
    var nameParts = name.split(":");
    var nameBegin = "";
    // We remove the last part of the checkbox name to define nameBegin.
    for (i = 0; i < (nameParts.length - 1); i++) {
        if (i == 0) {
            nameBegin = nameParts[i];
        } else {
            if (isNaN(nameParts[i])) {
                // If the nameParts[i] is a number, then we do not add it in the nameBegin. This will happen sometimes after an Ajax refresh.
                nameBegin = nameBegin + ":" + nameParts[i];
            }
        }
    }
    var checkboxes = document.getElementsByTagName("input");
    for (i = 0; i < checkboxes.length; i++) {
        // We search all checkboxes. We checked the ones with name has the same beginning as the main checkbox.
        if (checkboxes[i].name.indexOf(nameBegin) == 0) {
            checkboxes[i].checked = mainCheckbox.checked;
        }
    }
}

mainCheckbox, donné en argument est le checkbox principal (celui de l'entête).

Ce qui fait que tu dois avoir ceci :

Code:

1
2
3
4
5
6
<h:column>
    <f:facet name="header">
        <h:selectBooleanCheckbox onclick="selectAllCheckboxes(this);"/>
    </f:facet>
    ...
</h:column>