[POO] Définir le nombre max de case d'un checkbox à cocher

Version imprimable

06/11/2006, 09h12
delma

[POO] Définir le nombre max de case d'un checkbox à cocher

Hello tout le monde!

Et bien je cherche un moyen simple de pouvoir définir le nombre max de checkbox que l'on a le droit de cocher.

Exemple:

Indiquer vos deux principale qualités:

- beau
- fort
- petit
- grand
- blond

L'idée est que l'utilisateur puisse choisir entre ces 5 propositions, mais ne puisse en cocher que 2...

La valeur du nombre possible de réponse est stocker dans ma bd ainsi qu'une autre information qui défini si l'utilsateur doit répondre - au moins, juste ou plus que - 2 réponse.

Suis-je obliger de passer par du javascript?
Est-ce que quelqu'un a une solution à proposer pour répondre à ce problème please!

Merci d'avance!

salut

moi je ne vois de solution qu'au niveau js:
tu fais une boucle sur les 5
tu testes si les checbox sont cochées
et ton nb total de cochées est inf ou égal à 2 alors c'est ok sinon il te redonne la main pour n'en choisir que 2

j'ai un script:
Code:

1 2 3 4 5 6 7 8 for (i=0; i<=4; i++) { if ((document.getElementById("genre"+stritem[i]).checked) == false) { // tant que les cases ne sont pas cochées, on continue // alert("non"); } else { // alert("oui"); // alert(stritem[i]); }
qui ne fait pas la même chose, mais dont le principe est très proche...
@ toi de l'adapter
@+

06/11/2006, 13h52
Sancho_54

Ton test sur les cases à cocher veux tu le faire après avoir validé les choix ou le test a lieu a chaque fois que tu coche un case c'est-à-dire que lorsque l'utilisateur coche une troisieme case il est prévenu qu'il ne peut pas?
06/11/2006, 15h28
delma

Citation:

Envoyé par Sancho_54

Ton test sur les cases à cocher veux tu le faire après avoir validé les choix ou le test a lieu a chaque fois que tu coche un case c'est-à-dire que lorsque l'utilisateur coche une troisieme case il est prévenu qu'il ne peut pas?

Je préfère le faire le plus vite possible, donc quand le client coche la 3 eme case... Donc si je comprends bien le seul moyen c'est JS?

Et moi qui n'en ai jamais fait... :?
bon ca doit pas être la mer à boire...

Oui, Javascript est le seul moyen.

Tiens, voilà de quoi te satisfaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function verifChk(id){
   nbchk = document.getElementById('divchk').getElementsByTagName('input').length;
   var i;
   var nbcochee = 0;
   for(i=1;i<=nbchk;i++){
      if(document.getElementById('chk'+i).checked==true){
         nbcochee++;
         if(nbcochee>2){
            alert('Vous ne pouvez pas en choisir plus de deux.');
            document.getElementById(id).checked = false;
         }
      }
   }
}

Code:

1
2
3
4
5
<div id="divchk">
   1:<input type="checkbox" id="chk1" name="chk1" onclick="verifChk('chk1')" />
   2:<input type="checkbox" id="chk2" name="chk2" onclick="verifChk('chk2')" />
   3:<input type="checkbox" id="chk3" name="chk3" onclick="verifChk('chk3')" />
</div>

Mais tu as intérêt à établir des règles, parce qu'admettons je ne choisis que deux cases : petit et grand ...

Ou alors utilise des boutons radio.

Citation:

Envoyé par Bisûnûrs

Oui, Javascript est le seul moyen.

Tiens, voilà de quoi te satisfaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function verifChk(id){
   nbchk = document.getElementById('divchk').getElementsByTagName('input').length;
   var i;
   var nbcochee = 0;
   for(i=1;i<=nbchk;i++){
      if(document.getElementById('chk'+i).checked==true){
         nbcochee++;
         if(nbcochee>2){
            alert('Vous ne pouvez pas en choisir plus de deux.');
            document.getElementById(id).checked = false;
         }
      }
   }
}

Code:

1
2
3
4
5
<div id="divchk">
   1:<input type="checkbox" id="chk1" name="chk1" onclick="verifChk('chk1')" />
   2:<input type="checkbox" id="chk2" name="chk2" onclick="verifChk('chk2')" />
   3:<input type="checkbox" id="chk3" name="chk3" onclick="verifChk('chk3')" />
</div>

Mais tu as intérêt à établir des règles, parce qu'admettons je ne choisis que deux cases : petit et grand ...

Ou alors utilise des boutons radio.

merci beaucoup, c'est fort gentil!!! :oops:

Par contre qu'entends tu par des règles, je vois poo ce que tu veux dire.

06/11/2006, 15h57
Bisûnûrs

Citation:

Envoyé par delma

Par contre qu'entends tu par des règles, je vois poo ce que tu veux dire.

Si petit est coché, impossible de cocher grand.
Si maigre est coché, impossible de cocher gros.

Etc ...
06/11/2006, 16h03
delma

Citation:

Envoyé par Bisûnûrs

Si petit est coché, impossible de cocher grand.
Si maigre est coché, impossible de cocher gros.

Etc ...

Ok, je vois ce que tu veux dire, mais la je n'est aucun moyen de controle. Et ce n'est pas réellement important en fait dans le cadre de ce que je fais.
Merci beaucoup de ton aide!!

Yep, j'ai encore une petite question sur le code javascript...
En fait j'utilise des templates pour passer des variables et pour creer ma liste de checkbox.
Ce qui donne le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script src="./js/script_checkbox.js" type="text/javascript"></script> <table> <tr> <td>{$libelleQuestionFermee}</td> </tr> <div id="divchk"> {section name="laListeModalite" loop=$listeModalite} <tr> <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td> </tr> {/section} </div> </table>
Mais en faisant de la sorte, le code JS ne fonctionne pas. J'ai remarqué que la variable nbchk restée à zéro, mais je ne vois pas comment éviter ce problème...:oops:

Désolé, mais je suis vraiment pas encore formé sur JS...

Citation:
Envoyé par delma
Yep, j'ai encore une petite question sur le code javascript...
En fait j'utilise des templates pour passer des variables et pour creer ma liste de checkbox.
Ce qui donne le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script src="./js/script_checkbox.js" type="text/javascript"></script> <table> <tr> <td>{$libelleQuestionFermee}</td> </tr> <div id="divchk"> {section name="laListeModalite" loop=$listeModalite} <tr> <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td> </tr> {/section} </div> </table>
Mais en faisant de la sorte, le code JS ne fonctionne pas. J'ai remarqué que la variable nbchk restée à zéro, mais je ne vois pas comment éviter ce problème...:oops:

Désolé, mais je suis vraiment pas encore formé sur JS...
C'est normal et ce n'est pas un problème Javascript, enfin si ce n'est que ce que je pense.

Tu inclus un div entre les balises tr pour avoir au final quelque chose du genre :
Code:

1 2 3 4 5 6 7 <table> <div id="divchk"> <tr> <td></td> </tr> </div> </table>
C'est tout bonnement syntaxiquement faux.

Solution :
Code:

1 2 3 4 5 6 7 8 9 10 11 <table id="divchk"> <tr> <td>{$libelleQuestionFermee}</td> </tr> {section name="laListeModalite" loop=$listeModalite} <tr> <td><input type="checkbox" id="{$listeModalite[laListeModalite].nom_modalite}" name="{$listeModalite[laListeModalite].nom_modalite}" onclick="verifChk('{$listeModalite[laListeModalite].nom_modalite}')" />{$listeModalite[laListeModalite].nom_modalite}</td> </tr> {/section} </table>
N'oublie pas de regarder le code généré (Afficher la source) pour voir si les id dans tes inputs correspondent bien à la boucle Javascript.

Attention aussi, ça ne fonctionnera pas ou mal si tu as des inputs dans la première ligne de ton tableau.

06/11/2006, 17h36
delma

Merci, ca va déjà mieux, mais ca ne fonctionne toujours po...

Edit : je viens de trouver mon erreur!

Merci encore!!!