[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

Heu ... pas bien le temps, l�

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

A+

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

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 )

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

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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+

**jabs** · 06/07/2007, 07h56

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 :

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

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

JavaScript

Discussions similaires

Partager

Partager