Checkbox : Récupérer valeur si pas coché [Résolu]

arthuro45 · 04/12/2009, 10h29

Bonjour,

cette fonction fonctionne quand je coche la case, mais quand je décoche rien ne se passe. Je veux griser un bouton en fonction de l'état du checkbox.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=true;
	}else{
	document.getElementById('valid_select').disabled=false;
	}
}

Merci

E.Bzz · 04/12/2009, 10h32

Bonjour,
il faudrait voir le code HTML associé, avec l'appel de la fonction ...

A+

andry.aime · 04/12/2009, 11h13

Bonjour,
+1E.Bzz
Mais tu peux simplifier ton code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function apparait()
{
  document.getElementById('valid_select').disabled=document.form1.choix.checked;
}

arthuro45 · 04/12/2009, 11h49

Citation:

Mais tu peux simplifier ton code.

Code :
function apparait()
{
document.getElementById('valid_select').disabled=document.form1.choix.checked;
}

Mais ça ne grise pas le bouton quand je décoche.

Le code HTML est un tableau je vous met une partie simplifiée :

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
<html>
<head>
</head>
<body>
<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>
<table id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>tab1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee</td>
</tr>
</tbody>
</table>
</body>
</html>

E.Bzz · 04/12/2009, 12h01

Citation:

Envoyé par arthuro45

Mais ça ne grise pas le bouton quand je décoche.

Simplifier un code est différent de corriger une erreur.
La suggestion d'Andry reste donc tout à fait valable

Citation:

Envoyé par arthuro45

Le code HTML est un tableau je vous met une partie simplifiée

Sauf dans les cas extrêmes, mieux vaut ne pas simplifier

Ici par exemple, tu te retrouves avec un type="submit" qui n'est pas dans un form (pour nous, car je suppose que le form existe bien, mais on ne peut t'aider que sur le code que tu nous montres).
Au passage, la balise <button> est dépréciée et ne peut de toutes façons pas être de type="submit" => à remplacer par un input type="submit"!

Donc, le code complet serait préférable ...

A+

arthuro45 · 04/12/2009, 12h57

Le code comprend du PHP, requêtes ect... pas essentiel pour le test, donc j'ai ajouté les fonctions Javascript dans le head pour l'essai et cela donne un petit tableau exploitable :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=true;
	}else{
	document.getElementById('valid_select').disabled=false;
	}
}   
</script>
</head>
<body>
<?php 
$self = $_SERVER['PHP_SELF'];
echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee1</td>
</tr>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee2</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

andry.aime · 04/12/2009, 13h12

Le code HTML généré mais pas le php

Citation:

<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>

à remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>

Comme l'a dit E.Bzz.

Citation:

<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee1</td>
</tr>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>

Un id doit être unique dans un document.

arthuro45 · 04/12/2009, 13h42

Citation:

Un id doit être unique dans un document.

Je pense que le problème vient de là. Les checkbox sont générés par un while en fonction du nombre d'entrées dans ma table, donc ils ont forcément le même id. Comment contourner ce problème ?

Le code avec le PHP :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=false;
	}else{
	document.getElementById('valid_select').disabled=true;
	}
}   
</script>
</head>
<body>
<?php echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<?php
$requete = mysql_query("select champ from table");
while($row = mysql_fetch_array($requete)){
?>	
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td><?php echo $row['champ']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
</body>
</html>

Bovino · 04/12/2009, 13h44

Citation:

Envoyé par arthuro45

Comment contourner ce problème ?

En incrémentant un compteur dans le while pour le coller à l'id par exemple...

arthuro45 · 04/12/2009, 14h25

Citation:

En incrémentant un compteur dans le while pour le coller à l'id par exemple...

Bonne idée mais comment insérer ça dans le while, il y a déjà une condition?

E.Bzz · 04/12/2009, 14h27

Citation:

Envoyé par arthuro45

Bonne idée mais comment insérer ça dans le while, il y a déjà une condition?

Peu importent les conditions et le contenu actuel du while() : ce compteur ne modifie pas le fonctionnement de la boucle.
Tu initialise ton compteur avant la boucle,
puis à chaque "tour", tu concatènes ce compteur à la partie fixe de l'id,
puis tu l'incrémentes pour le passage suivant.

Le reste du while() demeure identique ...

A+

arthuro45 · 04/12/2009, 14h39

Ok maintenant j'ai bien un id différent pour chaque entrée sur mes checkbox, mais je ne peux plus récupérer leur valeurs pour savoir si elles sont cochées ou pas.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=false;
	}else{
	document.getElementById('valid_select').disabled=true;
	}
}   
</script>
</head>
<body>
<?php echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<?php
$requete = mysql_query("select id,champ from table");
$i = 1;
while($row = mysql_fetch_array($requete)){
$compteur = $i++;
?>	
<tbody>
<tr>
<td><td class='check'><input type="checkbox" name="<?php echo $compteur; ?>" id="<?php echo $compteur; ?>" value="<?php echo $row['id']; ?>" onclick="apparait()"></td></td>
<td><?php echo $row['champ']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
</body>
</html>

E.Bzz · 04/12/2009, 14h51

Citation:

Envoyé par arthuro45

Ok maintenant j'ai bien un id différent pour chaque entrée sur mes checkbox, mais je ne peux plus récupérer leur valeurs pour savoir si elles sont cochées ou pas.

Relis bien ce qui t'a été dit : personne n'a parlé des name : un name n'a pas à être unique dans la page ...
Il ne s'agissait que des ID.
Par ailleurs, tu devrait conserver une partie fixe à tes id et la concaténer au compteur.

A+

arthuro45 · 04/12/2009, 15h08

Ok j'ai fais les modifications :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
$requete = mysql_query("select id,champ from table");
$i = 1;
while($row = mysql_fetch_array($requete)){
$compteur = "choix".$i++;
?>	
<tbody>
<tr>
<td><td class='check'><input type="checkbox" name="choix" id="<?php echo $compteur; ?>" value="<?php echo $row['id']; ?>" onclick="apparait()"></td></td>

Mais comment récupérer les valeurs des checkbox dans les fonctions ?

E.Bzz · 04/12/2009, 15h51

Citation:

Envoyé par arthuro45

Mais comment récupérer les valeurs des checkbox dans les fonctions ?

Ben pareil qu'avant justement : dans selectall() en parcourant ton tableau choix[]

D'ailleurs, ça permet de mettre le doigt sur le problème à l'origine de cette discussion : dans la fonction apparait() tu utilisais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.form1.choix.checked

alors que ça aurait dû être de la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.form1.choix[i].checked

puisqu'avec des name communs, il s'agit d'un tableau d'éléments

Pour éviter d'avoir à gérer un indice de tableau dans cette fonction, je te suggère de modifier ta fonction (en reprenant la suggestion d'Andry, puisque tu n'as pas l'air convaincu

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function apparait(obj)
{
document.getElementById('valid_select').disabled=obj.checked;
}

et donc l'appel, dans chaque checkbox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="apparait(this);"

EDIT : au fait : non tu n'as pas fait toutes les modifications. Tu n'as pas intégrer de partie fixe en début de tes id ...

A+

E.Bzz · 04/12/2009, 15h54

... et c'est quoi ces

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td><td>......</td></td>

J'espère que ce n'est qu'un problème de copier/coller

A+

arthuro45 · 07/12/2009, 10h49

Citation:

... et c'est quoi ces
Code :
<td><td>......</td></td>

oups, c'est une erreur (corrigée).

Citation:

EDIT : au fait : non tu n'as pas fait toutes les modifications. Tu n'as pas intégrer de partie fixe en début de tes id ...

Si si j'ai concaténé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$compteur = "choix".$i++;

EDIT :

Citation:

Pour éviter d'avoir à gérer un indice de tableau dans cette fonction, je te suggère de modifier ta fonction (en reprenant la suggestion d'Andry, puisque tu n'as pas l'air convaincu ) :
Code :
function apparait(obj)
{
document.getElementById('valid_select').disabled=obj.checked;
}

Cette fonction donne le résultat inverse : quand je coche ça disable.

Je connaissais pas cette cette syntaxe : disabled=obj.checked
Comment fais-t'on pour récupérer la value ?

Le but ultime est de récupérer la ou les value(s) des checkbox sélectionnées, d'ouvrir un popup pour modifier les entrées affichées dans la popup.

E.Bzz · 07/12/2009, 14h17

Citation:

Envoyé par arthuro45

Cette fonction donne le résultat inverse : quand je coche ça disable.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function apparait(obj)
{
document.getElementById('valid_select').disabled=!obj.checked;
}

Citation:

Envoyé par arthuro45

Je connaissais pas cette cette syntaxe : disabled=obj.checked
Comment fais-t'on pour récupérer la value ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

obj.value;

Un peu d'imagination ....

A+

arthuro45 · 08/12/2009, 12h39

Merci pour votre aide.

J'ai fini par boucler sur les checkbox pour ne griser le bouton qu'a la condition que toutes les cases soient non cochées, avec mon niveau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function apparait(choix)
{
var total="";
for(var i=0; i < document.form1.choix.length; i++){
	if(document.form1.choix[i].checked){
		total +=document.form1.choix[i].value + "\n"
		}
	}
	if(total==""){
		document.getElementById('valid_select').disabled=true; 
	}else{
		document.getElementById('valid_select').disabled=false;
	}
}

Il me reste à écrire la fonction permettant de récupérer les valeurs des cases cochées et d'ouvrir un popup, je vais le faire en ajax.

04/12/2009, 15h54	#16
E.Bzz Responsable Modération Inscription : janvier 2007 Messages : 9 034 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2007 Messages : 9 034 Points : 14 564 Points : 14 564	... et c'est quoi ces Code : Sélectionner tout - Visualiser dans une fenêtre à part <td><td>......</td></td> J'espère que ce n'est qu'un problème de copier/coller A+
	00

04/12/2009, 10h32	#2
E.Bzz Responsable Modération Inscription : janvier 2007 Messages : 9 034 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2007 Messages : 9 034 Points : 14 564 Points : 14 564	Bonjour, il faudrait voir le code HTML associé, avec l'appel de la fonction ... A+
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email