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

**jabs** · 05/07/2007, 16h34

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 :

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
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

**E.Bzz** · 05/07/2007, 16h46

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+

**jabs** · 05/07/2007, 16h56

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

**E.Bzz** · 05/07/2007, 17h08

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 :

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

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+

**jabs** · 05/07/2007, 17h25

Oui E.Bzz.

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

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
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

**E.Bzz** · 05/07/2007, 17h30

Envoyé par jabs

Quelque chose du genre comme ton code,

Comment "du genre" ?
Ca marche ou pas ?

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

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
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