bouton radio avec un seul élément

Version imprimable

Bonjour,

J'utilise des input radio, placés en face de chaque ligne, dans un tableau HTML. Mais je ne connais pas le nombre d'éléments à l'avance.
Je voudrais que le bouton radio s'active en cliquant sur la ligne du tableau.
j'ai donc créé une fonction click_tr(idLigneSelectionee), placé sur le onClick de chaque ligne (TR) du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 function click_tr(id) { var inputForm = document.getElementById("inputForm"); for (var i=0; i<inputForm.radioInput.length; i++) { if (inputForm.radioInput[i].value == id) { inputForm.radioInput[i].checked = "checked"; return; } } }
Elle fonctionne bien, sauf lorsqu'il n'y a que 1 élément dans le tableau...

Savez vous comment régler ce cas particulier ?

Merci et bonne journée,

Gilou.

re-bonjour,

J'ai un peu avancé... mais pas assez.
j'arrive à sélectionner le bouton radio, même lorsqu'il n'y a que un élément avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function click_tr(id) { var inputForm = document.getElementById("inputForm"); for (var i=0; i<inputForm.radioInput.length; i++) { if (inputForm.radioInput[i].value == id) { inputForm.radioInput[i].checked = "checked"; return; } } //cas de l'élément unique inputForm.radioInput.checked = "checked"; }
mais lorsque j'envoie le formulaire, l'élément radio n'est pas envoyé.

Avez-vous une idée ?
Merci,

Gilou

13/03/2012, 12h02
Bovino

Citation:

sauf lorsqu'il n'y a que 1 élément dans le tableau...

Ouais... c'est-à-dire ? :?

Bonjour,

J'aimerais que le bouton radio soit "checked" lorsque l'utilisateur clique sur la ligne correspondante.
En d'autres termes :
Ce code fonctionne.

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
 
<html>
	<head>
		<script language="javascript">
 
		function click_tr(id) {
 
			var inputForm = document.getElementById("inputForm");
 
			for (var i=0; i<inputForm.radioInput.length; i++) {
				if (inputForm.radioInput[i].value == id) {
					inputForm.radioInput[i].checked = "checked";
					return;
				}
			}
 
		}
 
		</script>
	</head>
 
	<body>
		<form id="inputForm">
			<table>
				<tr onClick="click_tr(1)">
					<td><input type='radio' name='radioInput' value='1'></td>
					<td>Ligne numéro 1 du tableau</td>
				</tr>
				<tr onClick="click_tr(2)">
					<td><input type='radio' name='radioInput' value='2'></td>
					<td>Ligne numéro 2 du tableau</td>
				</tr>	
			</table>
		</form>
	</body>
</html>

Mais ce code ne fonctionne plus, lorsqu'il n'y a qu'une ligne dans le tableau

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
 
<html>
	<head>
		<script language="javascript">
 
		function click_tr(id) {
 
			var inputForm = document.getElementById("inputForm");
 
			for (var i=0; i<inputForm.radioInput.length; i++) {
				if (inputForm.radioInput[i].value == id) {
					inputForm.radioInput[i].checked = "checked";
					return;
				}
			}
 
		}
 
		</script>
	</head>
 
	<body>
		<form id="inputForm">
			<table>
				<tr onClick="click_tr(1)">
					<td><input type='radio' name='radioInput' value='1'></td>
					<td>Ligne numéro 1 du tableau</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Il n'y a évidement pas d’intérêt à utiliser des boutons radio si il n'y a qu'un seul choix, mais c'est un tableau dynamique, et je ne connais pas le nombre d'élément à l'avance.

Merci

Gilou

13/03/2012, 13h50
Bovino

Effectivement, la syntaxe inputForm.radioInput n'est pas la meilleure (et de loin) notamment dans ton cas puisque tu ne peux pas savoir si elle va renvoyer un élément ou une collection.

Tu gagneras à passer par

Code:

inputForm.getElementsByName('radioInput')

qui elle te renverra systématiquement une collection, même s'il n'y a qu'un élément.

tu parles d'un code comme ça ?

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
 
<html>
	<head>
		<script language="javascript">
 
		function click_tr(id) {
 
			var inputForm = document.getElementById("inputForm");
			var elementRadio = inputForm.getElementsByName('radioInput')
 
			for (var i=0; i<elementRadio.length; i++) {
				if (elementRadio[i].value == id) {
					elementRadio.checked = "checked";
					return;
				}
			}
 
		}
 
		</script>
	</head>
 
	<body>
		<form id="inputForm">
			<table>
				<tr onClick="click_tr(1)">
					<td><input type='radio' name='radioInput' value='1'></td>
					<td>Ligne numéro 1 du tableau</td>
				</tr>
				<tr onClick="click_tr(2)">
					<td><input type='radio' name='radioInput' value='2'></td>
					<td>Ligne numéro 2 du tableau</td>
				</tr>	
			</table>
		</form>
	</body>
</html>

Ca ne fonctionne pas non plus...

13/03/2012, 14h21
Bovino

Oui, c'est pas

Code:

var elementRadio = inputForm.getElementsByName('radioInput')

mais

Code:

var elementRadio = document.getElementsByName('radioInput')

et d'autre part, ce n'est pas

Code:

elementRadio.checked = "checked";

mais

Code:

elementRadio.checked[i] = "checked";
13/03/2012, 14h36
LeGilou

C'est parfait, merci.
Bonne journée, et à bientôt.