Conditions avec 2 checkbox

Version imprimable

Bonjour,

Voici ce que je recherche en utilisant javacript :

si une personne coche la checkbox "paiement" elle doit donc cocher un bouton radio "cheque" "cb" ou "mandat"

voici le debut de mon javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 var payment = document.formulaire.payment; var i=0; while(i<payment.length & payment[i].checked==false) { i++ ; } if(i>=payment.length) { alert("choisissez votre paiement"); return false; }
Si vous avez des idées ?

Merci d'avance

Salut,

Poste-nous un document html complet et vidé de tout code inutile à l'illustration de ton problème, s'il te plait. On ne sait pas ce que représente quoi dans ton code. Voici un petit modèle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>modèle de code pour bien poster</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  /* code css */
  </style>
</head>
<body>
  <!-- code xhtml -->
  <script type="text/javascript">
  <!--
    // code javascript
  //-->
  </script>
</body>
</html>

En parlant de contenu inutile, tu ne peux pas supprimer la première ligne de ton modèle ? :lol:

Oups je sors et je cours, il y a une armée à mes trousses ;)

Sinon c'est vrai que ce n'est pas très clair ta demande ...

Si tu veux juste tester qu'un bouton radio est coché, tu peux utiliser cette fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function isRadioChecked(objRadio) { if (objRadio[0]) { for (i=0; i < objRadio.length; i++) { if (objRadio[i].checked) { return true; } } } else if (objRadio.checked) { return true; } return false; }
Et pour obtenir la valeur sélectionnée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function getRadioValue(objRadio) { if (objRadio[0]) { for (i=0; i < objRadio.length; i++) { if (objRadio[i].checked) { return objRadio[i].value; } } } else if (objRadio.checked) { return objRadio.value; } return false; }

voici le code

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">  
function validpaiement()
{
if ((document.forms.paiement.checked==true) && (document.forms.mode.checked==false) )
{
alert("merci de selectionner votre paiement");
return false;
}
return true;
}
</script>
</head>
<body>
 
<form action="http://www.monsite.com/acces-paiement.html" method="post" enctype="application/x-www-form-urlencoded" name="forms" OnSubmit="return validpaiement()">
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb" /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque" />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat" />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

le principe que je recherche est que si il coche la chekbox il faut l'obliger a sélectionner un mode de paiement

Merci

Il y a sûrement mieux,
mais voilà ce que je ferais.
Pour accéder à l'attribut checked, je passerais plutôt par la fonction getElementById()
et
je désactiverais les checkbox type de paiement
tant que l'utilisateur n'a pas signifié qu'il avait l'intention de payer maintenant.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
function $(id) {
	return document.getElementById(id);
} 
function activepaiement() {
	$("cb").disabled=$("paiement").checked==false;
	$("cheque").disabled=$("paiement").checked==false;
	$("mandat").disabled=$("paiement").checked==false;
}
function validpaiement() {
	if (($("paiement").checked==true) && !(($("cb").checked||$("cheque").checked||$("mandat").checked)==true) ) {
		alert("merci de selectionner votre paiement");
		return false;
	}
	return true;
}
window.onload=function() {
	activepaiement();
}
</script>
</head>
<body>
 
<form action="" method="post" enctype="application/x-www-form-urlencoded" name="forms" >
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" onclick="activepaiement()" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb"  /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque"  />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat"  />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider" onclick="validpaiement()">
			</td>
		</tr>
	</table>
</form>
</body>
</html>

Fred

A vue de nez dans validpaiement :

Code:

1
2
3
4
5
6
7
if (document.getElementById("paiement").checked) {
  var mode = document.getElementsByName("mode");
  for (var i=0,imax=mode.length; i<imax; i++) {
    if (mode[i].checked) { return true; }
  }
  return false;
}

17/07/2009, 08h17
romann76

merci de vos réponses mais aucun des 2 fonctionnent...

en fait, je peux valider sans passer par les conditions

Romann76

Il suffit juste de déplacer le return false

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">  
function validpaiement()
{
if (document.getElementById("paiement").checked) {
  var mode = document.getElementsByName("mode");
  for (var i=0,imax=mode.length; i<imax; i++) {
    if (mode[i].checked) { return true; }
  }
}
alert("raté");
return false;
}
</script>
</head>
<body>
 
<form action="http://www.monsite.com/acces-paiement.html" method="post" enctype="application/x-www-form-urlencoded" name="forms" OnSubmit="return validpaiement()">
	<table>
		<tr>
			<td>
	<input type="checkbox" name="paiement" id="paiement" /></td><td> Je désire régler maintenant</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cb" /> Carte bancaire</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="cheque" />Chèque</td>
		</tr>
		<tr>
			<td><input type="radio" name="mode" id="mandat" />Mandat</td>
		</tr>
		<tr>
			<td colspan="2" style="text-align:center">
			<input type="submit" value="valider">
			</td>
		</tr>
	</table>
</form>
</body>
</html>