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 :

[Checkbox] cochage multiple


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Inscrit en
    Juin 2004
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 7
    Points : 6
    Points
    6
    Par défaut [Checkbox] cochage multiple
    Bonjour,

    J'ai cherché partout mais là je bloque.

    Je cherche à cocher plusieurs checkbox de mes input lorsque j'ai coché une checkbox parent.

    Le problème c'est que rien ne définit un héritage dans les checkbox et que du coup je n'arrive pas à récupérer les names ou id correspondants aux checkbox à cocher. Sachant qu'en plus les noms sont variables, je dispose néanmoins d'un tableau listant indifféremment mais dans l'ordre les parents et les checkbox enfant

    Voici mon code créant l'affichage de mes checkbox :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <form action="cs.php" method="POST">
    	<table>
    		<tr class="pos"><td><input type="checkbox" name="dev208_POS" value="dev208_POS" onChange="others()" onClick="others()">dev208_POS</td></tr>
    		<tr><td class="spooltab"><input type="checkbox" name="dev208_POS" value="15632716">15632716</td></tr>
    		<tr class="pos"><td><input type="checkbox" name="dev498_POS" value="dev498_POS" onChange="others()" onClick="others()">dev498_POS</td></tr>
    		<tr><td class="spooltab"><input type="checkbox" name="dev498_POS" value="15632934">15632934</td></tr>
    		<tr class="pos"><td><input type="checkbox" name="dev575_POS" value="dev575_POS" onChange="others()" onClick="others()">dev575_POS</td></tr>
    		<tr><td class="spooltab"><input type="checkbox" name="dev575_POS" value="15632677">15632677</td></tr>
    	</table>		
    	<p>
    		<input type="hidden" name="action" value="clean">
    		<input type="submit" value="Clean spools">
    	</p>
    </form>

    Ensuite mon problème vient du JavaScript permettant de cocher les td de class 'spooltab' ayant comme unique parent le tr de class 'pos'

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function others() {
    	var c = document.getElementsByName();
    	for(var i=0;i<c.length;c++)
    	{
    		c[i].checked = true;
    	}
    }

    Merci de votre aide sur ce point.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    Je ne sais pas si ce code est très clair.
    la réponse est non!
    Important : Les règles incontournables d'utilisation de ce forum

  3. #3
    Futur Membre du Club
    Inscrit en
    Juin 2004
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Oui, désolé, merci pour ce rappel. J'ai modifié le code en conséquence.

  4. #4
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 646
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 646
    Points : 11 135
    Points
    11 135
    Par défaut
    bonjour,

    voici une façon de procéder :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!-- id du parent a 2 paramètres séparés par des _ : son index et le nombre d'enfants à cocher : -->
    <!-- id des enfants commence par l'index du parent-->
    <input type="checkbox" id="idParent_1_3" onclick="clicParent(this.id)"/><label for="idParent1">parent 1</label><br/>
    <input type="checkbox" id="idEnfant_10" style="margin-left:20px"/><label for="idEnfant10">enfant 1</label><br/>
    <input type="checkbox" id="idEnfant_11" style="margin-left:20px"/><label for="idEnfant11">enfant 2</label><br/>
    <input type="checkbox" id="idEnfant_12" style="margin-left:20px"/><label for="idEnfant12">enfant 3</label><br/>
    <br/>
    <input type="checkbox" id="idParent_2_4" onclick="clicParent(this.id)"/><label for="idParent1">parent 2</label><br/>
    <input type="checkbox" id="idEnfant_20" style="margin-left:20px"/><label for="idEnfant20">enfant 1</label><br/>
    <input type="checkbox" id="idEnfant_21" style="margin-left:20px"/><label for="idEnfant21">enfant 2</label><br/>
    <input type="checkbox" id="idEnfant_22" style="margin-left:20px"/><label for="idEnfant22">enfant 3</label><br/>
    <input type="checkbox" id="idEnfant_23" style="margin-left:20px"/><label for="idEnfant22">enfant 3</label><br/>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function clicParent(id)
    {
    	//id du checkbox parent a 2 paramètres séparés par des "_" : son index et le nombre d'enfants à cocher 
    	var indexParent = id.split("_")[1];
    	var nEnfants = id.split("_")[2];
    	var i;
     
    	alert("index parent=" + indexParent);
    	alert("nombre d'enfants=" + nEnfants);
     
    	for (i=0; i<nEnfants; i++)
    	{
    		document.getElementById("idEnfant_"+indexParent+i).checked = true;
    	}
    }

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Points : 9 944
    Points
    9 944
    Par défaut
    Une autre solution qui n'impose pas de modifier les ID serait d'utiliser une classe ou un data-attribute pour référencer la checkbox parente.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="checkbox" data-parent="ID_DU_PARENT"/>
    One Web to rule them all

  6. #6
    Futur Membre du Club
    Inscrit en
    Juin 2004
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Bonjour,

    Merci pour vos réponses.

    J'ai avancé. En y ajoutant un id + numéro.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table>
    <tr class="pos"><td><input type="checkbox" name="dev208_POS" value="dev208_POS" onChange="checkUn('dev208_POS',1)" onClick="checkUn('dev208_POS',1)">dev208_POS</td></tr>
    <tr><td class="spooltab"><input type="checkbox" name="15683339" id="dev208_POS1" value="15683339">15683339</td></tr>
    <tr class="pos"><td><input type="checkbox" name="dev498_POS" value="dev498_POS" onChange="checkUn('dev498_POS',1)" onClick="checkUn('dev498_POS',1)">dev498_POS</td></tr>
    <tr><td class="spooltab"><input type="checkbox" name="15683563" id="dev498_POS1" value="15683563">15683563</td></tr>
    <tr class="pos"><td><input type="checkbox" name="dev575_POS" value="dev575_POS" onChange="checkUn('dev575_POS',1)" onClick="checkUn('dev575_POS',1)">dev575_POS</td></tr>
    <tr><td class="spooltab"><input type="checkbox" name="15683308" id="dev575_POS1" value="15683308">15683308</td></tr>
    <tr class="pos"><td><input type="checkbox" name="dev671_POS" value="dev671_POS" onChange="checkUn('dev671_POS',1)" onClick="checkUn('dev671_POS',1)">dev671_POS</td></tr>
    <tr><td class="spooltab"><input type="checkbox" name="15683600" id="dev671_POS1" value="15683600">15683600</td></tr>
    </table>

    Mais j'ai l'impression que mon javascript ne retrouve pas mes éléments.

    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
    function checkUn (posname, nbid) {
     
    	posname += ''
     
    	if (document.getElementById(posname).checked) {
    		for (var i=1; i<nbid+1; i++) {
    			var obj = document.getElementById(posname+i)
    			obj.checked = true
    		}
    	} else {
    		for (var i=1; i<nbid+1; i++) {
    			var obj = document.getElementById(posname+i)
    			obj.checked = false
    		}
    	}
    }
    L'indice de mes id commence à 1.

    je tourne en rond en essayant de réécrire 100 fois ce code de manière différente mais je bloque toujours à l'execution.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Je reviens sur
    Citation Envoyé par Illith
    var c = document.getElementsByName();
    getElementsByName attend un paramètre, le name.

    Sinon en utilisant le code fourni pas Auteur, on peut faire une fonction simple en formatant les ID comme suite
    idparent1
      idparent1_0
      idparent1_1
      idparent1_2
    idparent2
      idparent2_0
      idparent2_1
      idparent2_2
    la fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function checkUn( objet){
      var prefixe = objet.id +"_";
      var state = objet.checked;
      var i=0, oEnfant;
      while( oEnfant = document.getElementById( prefixe +i)){
        oEnfant.checked = state;
        i++;
      }
    }
    et un appel, onclick="checkUn(this)" en passant en paramètre l'objet lui même, this donc.

    Pour test
    Code html : 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
    30
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Check ALL</title>
    <script>
    function checkUn( objet){
      var prefixe = objet.id +"_";
      var state = objet.checked;
      var i=0, oEnfant;
      while( oEnfant = document.getElementById( prefixe +i)){
        oEnfant.checked = state;
        i++;
      }
    }
    </script>
    </head>
    <body>
    <input type="checkbox" id="idParent1" onclick="checkUn(this)"/><label for="idParent1">parent 1</label><br/>
    <input type="checkbox" id="idParent1_0" style="margin-left:20px"/><label for="idParent1_0">enfant 1</label><br/>
    <input type="checkbox" id="idParent1_1" style="margin-left:20px"/><label for="idParent1_1">enfant 2</label><br/>
    <input type="checkbox" id="idParent1_2" style="margin-left:20px"/><label for="idParent1_2">enfant 3</label><br/>
    <br/>
    <input type="checkbox" id="idParent2" onclick="checkUn(this)"/><label for="idParent2">parent 2</label><br/>
    <input type="checkbox" id="idParent2_0" style="margin-left:20px"/><label for="idParent2_0">enfant 1</label><br/>
    <input type="checkbox" id="idParent2_1" style="margin-left:20px"/><label for="idParent2_1">enfant 2</label><br/>
    <input type="checkbox" id="idParent2_2" style="margin-left:20px"/><label for="idParent2_2">enfant 3</label><br/>
    <input type="checkbox" id="idParent2_3" style="margin-left:20px"/><label for="idParent2_3">enfant 3</label><br/>
    </body>
    </html>
    La même approche pourrait être réalisée en utilisant les names.

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 24
    Points : 29
    Points
    29
    Par défaut
    Pouvez vous s'il vous plais m'expliquer le fonctionnement de id.split ici
    Citation Envoyé par Auteur Voir le message
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    	var indexParent = id.split("_")[1];
    	var nEnfants = id.split("_")[2];
    cette fonction coche bien les enfant mais ne les décoche pas
    Citation Envoyé par Auteur Voir le message
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    for (i=0; i<nEnfants; i++){
    	document.getElementById("idEnfant_"+indexParent+i).checked = true;
    }
    pour décocher le tout il faut faire comme suit :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    for (i=0; i<nEnfants; i++){
    	// si parent true alors tous ses enfant le devienne sinon l'inverse
    	if(document.getElementById(id).checked == true){
    		document.getElementById("idEnfant_"+indexParent+i).checked = true;
    	}
    	else {
    		document.getElementById("idEnfant_"+indexParent+i).checked = false;
    	}
    }

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Citation Envoyé par amelodydz
    Pouvez vous s'il vous plais m'expliquer le fonctionnement de id.split ici
    un minimum de recherche sur le langage t'aurais surement amené à https://developer.mozilla.org/en-US/...s/String/split, ou autre...

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 24
    Points : 29
    Points
    29
    Par défaut
    si j'ai bien compris :est un tableau de la forme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    array{"idParent", 1, 3}
    c'est bien cela ?

  11. #11
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2013
    Messages
    24
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2013
    Messages : 24
    Points : 29
    Points
    29
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    un minimum de recherche sur le langage t'aurais surement amené à https://developer.mozilla.org/en-US/...s/String/split, ou autre...
    merci

    des fois j’essaie de comprendre le comportement d'un programme en faisant plusieurs tests après modification.

  12. #12
    Futur Membre du Club
    Inscrit en
    Juin 2004
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Juin 2004
    Messages : 7
    Points : 6
    Points
    6
    Par défaut
    Merci pour vos réponses.

    En ajoutant un id incrémenté, j'ai pu récupérer mes "enfants" avec un document.getElementById. L'argument "name" etant conservé comme à l'origine pour récupérer les valeurs de POST.

    J'ai dû pour cela un peu modifier la création de mes lignes d'input mais tout fonctionne correctement désormais.



    Merci encore pour les pistes

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

Discussions similaires

  1. [XL-2007] Un checkbox à usage multiple
    Par isrdum dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 02/04/2013, 20h59
  2. Réponses: 3
    Dernier message: 18/06/2012, 18h06
  3. Cochage multiple checkbox
    Par dam28800 dans le forum Général JavaScript
    Réponses: 11
    Dernier message: 08/08/2008, 12h16
  4. Checkbox à valeur multiple
    Par MacReiben dans le forum Servlets/JSP
    Réponses: 4
    Dernier message: 18/10/2006, 13h46

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