IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[POO] Groupe exclusif de cases à cocher


Sujet :

JavaScript

  1. #1
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut [POO] Groupe exclusif de cases à cocher
    Bonjour,

    Mon problème concerne les cases à cocher. Je souhaite que l'on puisse soit cocher des personnes (cases à cocher) soit qu'on puisse sélectionner un groupe parmi 3 (bouton radio). Voici le code que j'ai mais malheureusement tel qu'il est écrit on peut cocher des personnes et choisir un groupe ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form action="index.php">
    <input type= "checkbox" name="personne" value="nom"> Prenom Nom<br>
    <input type= "checkbox" name="personne" value="nom1"> Prenom1 Nom1<br>
    <input type= "checkbox" name="personne" value="nom2"> Prenom2 Nom2<br>
    <input type= "checkbox" name="personne" value="nom3"> Prenom3 Nom3<br>
     
    <input type= "radio" name="groupe" value="groupe1"> groupe 1<br>
    <input type= "radio" name="groupe" value="groupe2"> groupe 2<br>
    <input type= "radio" name="groupe" value="groupe3"> groupe 3<br>
    </form>

  2. #2
    Membre éclairé Avatar de Général03
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    848
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 848
    Par défaut
    C'est normal d'avoir le fonctionnement que tu décris car tu affiches tes balises sans conditions. Il faut que tu passes par javascript et que tu affiches soit tes cases à cocher soit tes radio en fonction d'un évènement. Joue sur le visibilité des tes objets.
    D'ailleurs qu'est ce qui conditionne ton choix ?

  3. #3
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    Justement c'est le probleme, c'est l'utilisateur qui choisit. Il faut que s'il coche des cases il ne puisse pas sélectionner de radio et vice versa.

  4. #4
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Une solution consiste à mettre un identifiant sur tes balises de type "input" : un identifiant pour les checkboxes, un autre identifiant pour les boutons radio.

    Par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form action="index.php">
    <input type= "checkbox" name="personne" value="nom" id="check"> Prenom Nom<br>
    <input type= "checkbox" name="personne" value="nom1" id="check"> Prenom1 Nom1<br>
    <input type= "checkbox" name="personne" value="nom2" id="check"> Prenom2 Nom2<br>
    <input type= "checkbox" name="personne" value="nom3" id="check"> Prenom3 Nom3<br>
     
    <input type= "radio" name="groupe" value="groupe1" id="radio"> groupe 1<br>
    <input type= "radio" name="groupe" value="groupe2" id="radio"> groupe 2<br>
    <input type= "radio" name="groupe" value="groupe3" id="radio"> groupe 3<br>
    </form>
    Tu implémentes ensuite une petite fonction javascript qui réagit sur les événements de clic et active ou désactive tes "input", en fonction de cet identifiant.

  5. #5
    Membre éclairé Avatar de Général03
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    848
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 848
    Par défaut
    Selon le code de Poulpynette tu peux essayer ce script JS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    if (document.getElementById('check').checked)
    {
    document.getElementById('check').style.visibility ="visible";
    document.getElementById('radio').style.visibility ="hidden";
    }
    else
    {
    document.getElementById('check').style.visibility ="hidden";
    document.getElementById('radio').style.visibility ="visible";
    }

  6. #6
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Merci pour le JS Général03

    Si je puis me permettre, je n'utiliserais pas "hidden" et "visible", car une fois mis à "hidden", on ne peut plus changer d'avis ...

    J'opterais plutôt pour la propriété "disabled", qui se contente de désactiver (griser) les "input" :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if (document.getElementById('check').checked)
    {
    document.getElementById('check').disabled ="";
    document.getElementById('radio').disabled ="disabled";
    }
    else
    {
    document.getElementById('check').disabled ="disabled";
    document.getElementById('radio').disabled ="";
    }
    Edit : pardon je suis idiote, une fois grisé, le problème persiste ... Je sors ...

  7. #7
    Membre éclairé Avatar de Général03
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    848
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 848
    Par défaut
    J'opterais plutôt pour la propriété "disabled", qui se contente de désactiver (griser) les "input" :
    Dans ce cas utilise plutot le script suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    if (document.getElementById('check').checked)
    {
    document.getElementById('check').disabled = true;
    document.getElementById('radio').disabled = false;
    }
    else
    {
    document.getElementById('check').disabled = false;
    document.getElementById('radio').disabled = true;
    }

  8. #8
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    Ok je crois avoir un début de solution ^^
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    <form action="">
       <input type="checkbox" name="personne" value="nom" onClick="verificateurRadio(this.form.groupe)">Prenom Nom<br>
       <input type="checkbox" name="personne" value="nom1" onClick="verificateurRadio(this.form.groupe)">Prenom1 Nom1<br>
       <input type="checkbox" name="personne" value="nom2" onClick="verificateurRadio(this.form.groupe)">Prenom2 Nom2<br>
       <input type="radio" name="groupe" value="BC" onClick="verificateurCheckBox(this.form.personne)">grp1<br>
       <input type="radio" name="groupe" value="nonBC" onClick="verificateurCheckBox(this.form.personne)">grp2<br>
       <input type="radio" name="groupe" value="nom" onClick="verificateurCheckBox(this.form.personne)">tous<br>
       </form>
       <SCRIPT language ="javascript">
    		function verificateurRadio(radio){
     
    			for (var i=0; i<radio.length;i++){
    				if (radio[i].checked){
    					alert("Vous avez déjà sélectionné un groupe, vous ne pouvez pas séléctionner de personnes")
    				}
    			}
     
    		}
    		function verificateurCheckBox(checkbox){
     
    			for (var i=0; i<checkbox.length;i++){
    				if (checkbox[i].checked){
    					alert("Vous avez déjà sélectionné une personne, vous ne pouvez pas séléctionner de groupe")	
    				}
    			}
     
    		}
    	</SCRIPT>
    Sauf que maintenant j'aimerai, déselectionner la checkbox ou le radio qui fait conflit...Est-ce que c'est possible avec du javascript??

  9. #9
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Citation Envoyé par Général03 Voir le message
    Dans ce cas utilise plutot le script suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    if (document.getElementById('check').checked)
    {
    document.getElementById('check').disabled = true;
    document.getElementById('radio').disabled = false;
    }
    else
    {
    document.getElementById('check').disabled = false;
    document.getElementById('radio').disabled = true;
    }
    Aussi oui !

    Mais j'y pense, remettre à false ne sert à rien puisque pour le moment, c'est irréversible une fois désactivé (true).

  10. #10
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    OULA j'ai un train de retard ...je regarde les solutions et je reviens ^^

  11. #11
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Citation Envoyé par alice.b Voir le message
    Ok je crois avoir un début de solution ^^
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    <form action="">
       <input type="checkbox" name="personne" value="nom" onClick="verificateurRadio(this.form.groupe)">Prenom Nom<br>
       <input type="checkbox" name="personne" value="nom1" onClick="verificateurRadio(this.form.groupe)">Prenom1 Nom1<br>
       <input type="checkbox" name="personne" value="nom2" onClick="verificateurRadio(this.form.groupe)">Prenom2 Nom2<br>
       <input type="radio" name="groupe" value="BC" onClick="verificateurCheckBox(this.form.personne)">grp1<br>
       <input type="radio" name="groupe" value="nonBC" onClick="verificateurCheckBox(this.form.personne)">grp2<br>
       <input type="radio" name="groupe" value="nom" onClick="verificateurCheckBox(this.form.personne)">tous<br>
       </form>
       <SCRIPT language ="javascript">
    		function verificateurRadio(radio){
     
    			for (var i=0; i<radio.length;i++){
    				if (radio[i].checked){
    					alert("Vous avez déjà sélectionné un groupe, vous ne pouvez pas séléctionner de personnes")
    				}
    			}
     
    		}
    		function verificateurCheckBox(checkbox){
     
    			for (var i=0; i<checkbox.length;i++){
    				if (checkbox[i].checked){
    					alert("Vous avez déjà sélectionné une personne, vous ne pouvez pas séléctionner de groupe")	
    				}
    			}
     
    		}
    	</SCRIPT>
    C'est un début mais là c'est juste un message qui détecte ce qui a été coché. Sans les identifiants sur tes balises "input", tu ne pourras construire ton javascript proprement.

    Et puis je trouve dommage de boucler sur tous tes "input" pour détecter celui qui a été coché, c'est un peu lourd.

    Citation Envoyé par alice.b Voir le message
    Sauf que maintenant j'aimerai, déselectionner la checkbox ou le radio qui fait conflit...Est-ce que c'est possible avec du javascript??
    Oui c'est possible, on t'a mis sur la piste un peu plus haut

  12. #12
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    Alors ya un début mais ça fonctionne pas tout à fait
    Voici mon code modifié avec vos idées:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <form action="">
       <input type="checkbox" name="check" id="check" value="nom" onClick="verificateurSelection()">Prenom Nom<br>
       <input type="checkbox" name="check" id="check" value="nom1"  onClick="verificateurSelection()">Prenom1 Nom1<br>
       <input type="checkbox" name="check" id="check"value="nom2" onClick="verificateurSelection()">Prenom2 Nom2<br>
       <input type="radio" name="radio" id="radio"  value="grp1" onClick="verificateurSelection()">grp1<br>
       <input type="radio" name="radio" id="radio" value="grp2"  onClick="verificateurSelection()">grp2<br>
       <input type="radio" name="radio" id="radio" value="grp3"  onClick="verificateurSelection()">grp3<br>
       </form>
     
      <SCRIPT language ="javascript">
    	function verificateurSelection(){
    		if (document.getElementById('check').checked)
    		{
    			document.getElementById('check').disabled = true;
    			document.getElementById('radio').disabled = false;
    		}
    		else
    		{
    			document.getElementById('check').disabled = false;
    			document.getElementById('radio').disabled = true;
    		}
    }
     
    	</SCRIPT>
    Le probleme c'est qu'il ne se passe pas du tout ce que je voulais... quand je coche un radio ça me désactive une checkboxe et non toutes et quand je coche un radio il se passe rien...

  13. #13
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Erf, j'avoue ne pas avoir testé le code avant de te donner cette idée ...

    Dès que j'ai un moment je teste et je te tiens au courant.

    Edit : effectivement le même "id" répété plusieurs fois a l'air de poser problème ...

  14. #14
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    d'acc. Je pense que le problème c'est que getElementById ne fait pas de boucle...enfin je sais pas exactement ce que ça fait mais comme il n'y a que le permier radio qui se grise quelque soit la case que je coche...

  15. #15
    Membre éclairé Avatar de Général03
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    848
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 848
    Par défaut
    il n'y a que le permier radio qui se grise quelque soit la case que je coche...
    En faite chaque balise <input> doit avoir un "id" unique tu doit avoir en html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <input type= "checkbox" name="personne" value="nom" id="1"> Prenom Nom<br>
    <input type= "checkbox" name="personne" value="nom1" id="2"> Prenom1 Nom1<br>
    <input type= "checkbox" name="personne" value="nom2" id="3"> Prenom2 Nom2<br>
    <input type= "checkbox" name="personne" value="nom3" id="4"> Prenom3 Nom3<br>
     
    <input type= "radio" name="groupe" value="groupe1" id="g1"> groupe 1<br>
    <input type= "radio" name="groupe" value="groupe2" id="g2"> groupe 2<br>
    <input type= "radio" name="groupe" value="groupe3" id="g3"> groupe 3<br>
    donc en javascript (pour le 1er checkbox) tu auras
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('1').disabled = true;
    etc pour les autres en mettant l'ID correspondant

    c'est que getElementById ne fait pas de boucle...enfin je sais pas exactement ce que ça fait
    cette fonction permet de sélectionner ton objet par son ID qui est un identifiant unique. Après tu peux lui spécifier des attributs (c'est se que l'on fait avec "disabled")

  16. #16
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Désolée, c'est moi qui ai fait erreur dès le départ en mettant des identifiants identiques sur les "input".

  17. #17
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    ça y est!!! j'ai trouvé!
    J'ai un peu été retardée à cause d'un parenthèsage malheureux (merci nodepad++ ) mais bon voici finalement ce que je voulais faire:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <form action="">
       <input type="checkbox" name="check" value="nom" onClick="verificateurR(this.form.groupe)">Prenom Nom<br>
       <input type="checkbox" name="check" value="nom1" onClick="verificateurR(this.form.groupe)">Prenom1 Nom1<br>
       <input type="checkbox" name="check" value="nom2" onClick="verificateurR(this.form.groupe)">Prenom2 Nom2<br>
       <input type="radio" name="groupe" value="grp1" onClick="verificateurC(this.form.check)">grp1<br>
       <input type="radio" name="groupe" value="grp2" onClick="verificateurC(this.form.check)">grp2<br>
       <input type="radio" name="groupe" value="grp3" onClick="verificateurC(this.form.check)">grp3<br>
       </form>
     
      <SCRIPT language ="javascript">
    	function verificateurR(radio){	
    		for (var i=0; i<radio.length; i++){
    				document.getElementsByName("groupe")[i].disabled=true;
    		}
    	}
    	function verificateurC(checkbox){
    		for(var i=0; i<checkbox.length;i++){
    				document.getElementsByName("check")[i].disabled=true;
    		}
    	}
     
    	</SCRIPT>
    ok c'est un peu lourd mais ça fonctionne.
    Je vais intégrer ça dans un menu déroulant (fait en flash) alors ça va etre galère , peut etre meme impossible mais bon je vais tenter!

  18. #18
    Membre chevronné Avatar de Poulpynette
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2006
    Messages
    349
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 48
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2006
    Messages : 349
    Par défaut
    Bien

    Si je peux te conseiller un bon éditeur, c'est PSPad.

    Tu vas t'arracher les cheveux si tu codes avec Notepad ^^

  19. #19
    Membre averti
    Inscrit en
    Février 2009
    Messages
    17
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 17
    Par défaut
    Citation Envoyé par Poulpynette Voir le message
    Bien

    Si je peux te conseiller un bon éditeur, c'est PSPad.

    Tu vas t'arracher les cheveux si tu codes avec Notepad ^^
    Merci je vais tester ça ^^.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. groupe d'option case à cocher
    Par rose0729 dans le forum IHM
    Réponses: 4
    Dernier message: 25/11/2011, 10h46
  2. [AC-2007] Case à cocher dans un groupe d'option
    Par Petit Rasta dans le forum IHM
    Réponses: 2
    Dernier message: 20/04/2010, 11h19
  3. [REGLER] Formulaire avec groupe de case à cocher
    Par Mickael33 dans le forum Langage
    Réponses: 8
    Dernier message: 25/11/2009, 21h27
  4. cases à cocher et groupe d'options
    Par krina85 dans le forum IHM
    Réponses: 2
    Dernier message: 17/03/2008, 22h37
  5. Réponses: 3
    Dernier message: 08/03/2008, 17h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo