bouton radio avec un seul élément

**LeGilou** · 13/03/2012, 11h45

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 :

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

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.

**LeGilou** · 13/03/2012, 11h58

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 :

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

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

**Bovino** · 13/03/2012, 12h02

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

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

**LeGilou** · 13/03/2012, 13h41

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 :

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

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

**Bovino** · 13/03/2012, 13h50

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 :

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

inputForm.getElementsByName('radioInput')

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

**LeGilou** · 13/03/2012, 14h10

tu parles d'un code comme ça ?

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

**Bovino** · 13/03/2012, 14h21

Oui, c'est pas

Code :

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

var elementRadio = inputForm.getElementsByName('radioInput')

mais

Code :

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

var elementRadio = document.getElementsByName('radioInput')

et d'autre part, ce n'est pas

Code :

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

elementRadio.checked = "checked";

mais

Code :

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

elementRadio.checked[i] = "checked";

**LeGilou** · 13/03/2012, 14h36

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

bouton radio avec un seul élément

JavaScript

Discussions similaires

Partager

Partager