[DOM] tout cocher (sélectionner ) avec les boutons RADIO

Version imprimable

Bonjour,
Vous avez sûrement vue le code du tout cocher avec les checkboxs,
Le miens c'est un tout sélectionner avec les boutons radio.
Le problème c'est que çà marche sous FireFox mais pas sur le grand IE
Donc je demende si quelqu'un peut m'aider c'est super.
Voici le source:

Code:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>FF vs IE</title>
    <script>
    function select_tout_radio( type )
    {
        var balises = document.getElementsByTagName("input");
 
        switch (type)
        {
          case '0':
 
            for (i in balises) {
            if (balises[i].type == "radio" && balises[i].value == "rien") {
            balises[i].checked = true;
            }
            }
           break;
 
          case '1':
             for (i in balises) {
            if (balises[i].type == "radio" && balises[i].value == "valider") {
            balises[i].checked = true;
            }
            }
            break;
          case '2':
             for (i in balises) {
            if (balises[i].type == "radio" && balises[i].value == "refuser") {
            balises[i].checked = true;
            }
            }
            break;
 
          default:
           break;
        }   
    }   
    </script>
</head>
 
<body class="cadre_vert" style="padding:10px; ">
<form method="post" name="formulaire2" action="jsFFIE.php">
 
<table border="0" cellspacing="2">
<tr>
<td align="center"><b>Bouton Maitre</b></td>
</tr>
<tr>
<td align="left">
    <input type="radio" name="principale" value="tv" onclick="select_tout_radio('1')"> Tout Valider
    <input type="radio" name="principale" value="tr" onclick="select_tout_radio('2')"> Tout Refuser
    <input type="radio" name="principale" value="rf" onclick="select_tout_radio('0')"> Ne rien faire pour tous
</td>
</tr>
<tr><td ><hr size="1" color="#ffffff" width="100%"></td></tr>
<tr>
<td align="center"><b>Bouton Esclave</b></td>
</tr>
 
<?php
for( $i=0;$i<=10;$i++)
{
    ?>
    <tr>
    <td>
    <input type="hidden" name="tableau[]" value="<?=$i?>">
    <input type="radio" name="valider_<?=$i?>" id="valide" value="valider"> Valider
    <input type="radio" name="valider_<?=$i?>" id="refuse" value="refuser"> Refuser
    <input type="radio" name="valider_<?=$i?>" id="rien" value="rien"> Ne rien faire
    </td>
    </tr>
    <?php
}
?>
 
</table>
</form>
</body>
</html>

Et merci d'avance

05/07/2007, 16h46
E.Bzz

Bonjour,
le principe des boutons radio, du fait qu'ils ont le même name, est justement de ne pouvoir en sélectionner qu'un seul.
Sinon, il est (largement) préférable d'utiliser des checkbox.

Et puis est-ce satisfaisant de pouvoir à la fois "Valider", "Annuler" et ne "Rien" faire ?

Il y a peut-être une précision que tu as oubliée dans tes explications :?

A+
05/07/2007, 16h56
jabs

Bonjour E.Bzz,

le contexte c'est que pour chaque ligne Esclave , on pourrait choisir soit "Valide", soit "refuser",soit "Ne rien faire". donc c'est le bouton radion qui est idéale mais pas les boutons checkbox,

les boutons Maîtres sont fait soit pour séléctionner tout les "valider" soit tout les "refuser" .... ( supposons qu'on a 1000 ligne à faire valider ou refuser )

Le problème avec ce code c'est que çà marche sur Fire Fox mais pas sur Internet Explorer.

C'est sûrement au niveau du support du DOM.

Mais je ne sais pas comment y remedier

:oops:

Citation:

Envoyé par jabs

les boutons Maîtres sont fait soit pour séléctionner tout les "valider" soit tout les "refuser" .... ( supposons qu'on a 1000 ligne à faire valider ou refuser )

Ah ok : tu as plusieurs groupe avec name="valider_<?=$i?>" ?
Code:

1 2 3 4 5 6 for (i=0; i<le_nombre_de_groupe_différents; i++) { NameDuGroupe="valider_"+i; CeGroupe = document.getElementsByName(NameDuGroupe); for (j=0; j<CeGroupe.length; j++) CeGroupe[j].checked = (CeGroupe[j].value=="Valider"); }
Comme ça ?

A+

Oui E.Bzz.

Quelque chose du genre comme ton code,
essayez de remplacer le contenu de la fonction select_tout_radio()
avec çà :

Code:

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
function select_tout_radio( type )
	{
		/*
		var balises = document.getElementsByTagName("input");
 
		switch (type)
		{
		  case '0':
 
		    for (i in balises) {
		    if (balises[i].type == "radio" && balises[i].value == "rien") {
			balises[i].checked = true;
			}
			}
		   break;
 
		  case '1':
		     for (i in balises) {
			if (balises[i].type == "radio" && balises[i].value == "valider") {
			balises[i].checked = true;
			}
			}
		    break;
		  case '2':
		     for (i in balises) {
			if (balises[i].type == "radio" && balises[i].value == "refuser") {
			balises[i].checked = true;
			}
			}
		    break;
 
		  default:
		   break;
		}	*/
		for (i=0; i<=10; i++) 
		{ 
 
			CeGroupe = document.getElementsByName("valider_"+i); 
			alert(CeGroupe);
			for (j=0; j<CeGroupe.length; j++) 
			{
				if (CeGroupe[j].value=="Valider") CeGroupe[j].checked = true; 
			}
		}
	}

et tu verras déjà la difference de ce que ça renvoye sur FireFox et su IE

:D

Citation:

Envoyé par jabs

Quelque chose du genre comme ton code,

Comment "du genre" ?
Ca marche ou pas ? :?

Citation:

essayez de remplacer le contenu de la fonction select_tout_radio()
avec çà :

Code:

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
function select_tout_radio( type )
	{
		/*
		var balises = document.getElementsByTagName("input");
 
		switch (type)
		{
		  case '0':
 
		    for (i in balises) {
		    if (balises[i].type == "radio" && balises[i].value == "rien") {
			balises[i].checked = true;
			}
			}
		   break;
 
		  case '1':
		     for (i in balises) {
			if (balises[i].type == "radio" && balises[i].value == "valider") {
			balises[i].checked = true;
			}
			}
		    break;
		  case '2':
		     for (i in balises) {
			if (balises[i].type == "radio" && balises[i].value == "refuser") {
			balises[i].checked = true;
			}
			}
		    break;
 
		  default:
		   break;
		}	*/
		for (i=0; i<=10; i++) 
		{ 
 
			CeGroupe = document.getElementsByName("valider_"+i); 
			alert(CeGroupe);
			for (j=0; j<CeGroupe.length; j++) 
			{
				if (CeGroupe[j].value=="Valider") CeGroupe[j].checked = true; 
			}
		}
	}

et tu verras déjà la difference de ce que ça renvoye sur FireFox et su IE

Heu ... pas bien le temps, là :mrgreen:

... pour les balses [ CODE], c'est le bouton # de l'éditeur de messages ;)

A+

05/07/2007, 17h39
jabs

oui, je l'ai tester ( ton code )

mais çà ne marche pas, j'ai dit "quelque chose du genre" car je vois que tu comprend bien ce que je voudrai y arriver.

Mais, çà ne marche pas, pourtant c'est logique ( comme je le vois )

Si tu remplaces le code de ta fonction select_tout_radio() par le mien, et en mettant la valeur de "le_nombre_de_groupe_différents" en dur, ça fonctionne pas ?
Une modif, au cas où tes n° de groupes ne se suivent pas (ou ne commencent pas à 0) :
Code:

1 2 3 4 5 6 7 for (i=0; i<le_nombre_de_groupe_différents; i++) { NameDuGroupe="valider_"+i; if (document.getElementsByName(NameDuGroupe)) { CeGroupe = document.getElementsByName(NameDuGroupe); for (j=0; j<CeGroupe.length; j++) CeGroupe[j].checked = (CeGroupe[j].value=="Valider"); } }
A+

Ben finalement j'ai trouve une solution
çà marche sur IE et sur Fire Fox
Merci pour votre aide les amis:
Voici le code finale commenté:

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>FF vs IE</title>
	<script>
		function select_tout_radio( type )
		{
			//Cette variable va recuperer le nombre de ligne de bouton radio esclave (selon votre besoin)
			var nombre = document.getElementsByName("tableau[]");
			for(i=0 ; i<nombre.length ; i++)
	        {
	            var a = document.getElementById(type+'_'+ i);
	            a.checked = true;
	        }
		}	
	</script>
</head>
<body >
<form method="post" name="formulaire2" action="jsFFIE.php">
<table border="0" cellspacing="2">
<tr>
<td align="center"><b>Bouton Maitre</b></td>
</tr>
<tr>
<td align="left">
	<input type="radio" name="principale" value="tv" onclick="select_tout_radio('valider')"> Tout Valider
	<input type="radio" name="principale" value="tr" onclick="select_tout_radio('refuser')"> Tout Refuser 
	<input type="radio" name="principale" value="rf" onclick="select_tout_radio('rien')"> Ne rien faire pour tous
</td>
</tr>
<tr><td ><hr size="1" color="#ffffff" width="100%"></td></tr>
<tr>
<td align="center"><b>Bouton Esclave</b></td>
</tr>
 
<?php
//Ce boucle est selon votre besoin (ex: resultat d'un requête DB), l'input hidden nous permet de savoir le nombre de ligne
for( $i=0;$i<=10;$i++)
{
        ?>
	<tr>
	<td>
	<input type="hidden" name="tableau[]" value="<?=$i?>">
	<input type="radio" name="valider_<?=$i?>" id="valider_<?=$i?>" value="valider"> Valider
	<input type="radio" name="valider_<?=$i?>" id="refuser_<?=$i?>" value="refuser"> Refuser
	<input type="radio" name="valider_<?=$i?>" id="rien_<?=$i?>" value="rien"> Ne rien faire
	</td>
	</tr>
	<?php
}
?>
 
</table>
</form>
</body>
</html>