Discussion :

[mfredok]

Bonjour à tous,

1) Je cherche à vérifier si tous les boutons radios de ma page ont été cochés(il y donc plusieurs groupes).

2) Comment faire pour mettre en rouge les textes des boutons radios qui n'ont pas été checker(donc par groupe).

Ce début de code semble la bonne piste...mais je crois que ma syntaxe est fausse.
Merci bcp à tous

Code :

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

1
2
3
4
5
6
7
8
9
 
 
	if($("input[type='radio']:checked").length() == 10){			
          page3();
	}
	else{
	$(".formError2").show();
	$("input[class='q4_case1']").css("color","red");
	}

[Sayrus]

il faut d'abord créer chaque élément

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="element">
  <input class="checkbox" type="checkbox" />
  <label class="label">Banane</label>
</div>
<div class="element">
  <input class="checkbox" type="checkbox" />
  <label class="label">Poire</label>
</div>
 
<input type="button" class="check" value="Vérifier" />

Ensuite, le code sera quelque chose du genre:

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
<script type="text/javascript">
$(document).ready(function()
{
  $('.check').click(function()
  {
    $('.element').each(function(index)
    {
      var checkbox=$(this).find('input');
      var label=$(this).find('label');
      if(checkbox.attr('checked')==false)
          label.css({'color':'red'});
 
    });
  }
});
</script>

J'ai pas vérifié le code et c'est fait à l'arrache mais le principe est le même

[llaffont]

Bonjour à tous,

1) Je cherche à vérifier si tous les boutons radios de ma page ont été cochés(il y donc plusieurs groupes).

Il s'agit de boutons Radios ou de CheckBox ?
Car respectivement ils sont Activé et Coché.



Pour une serie de checkBox ayant la class fetchCheck

HTML :

Code :

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

1
2
3
4
5
6
7
8
<input class="fetchCheck" value="1" type="checkbox"> Check 1<br>
<input class="fetchCheck" value="2" type="checkbox"> Check 2<br>
<input class="fetchCheck" value="3" type="checkbox"> Check 3<br>
<input class="fetchCheck" value="4" type="checkbox"> Check 4<br>
<input class="fetchCheck" value="5" type="checkbox"> Check 5<br>
<input class="fetchCheck" value="6" type="checkbox"> Check 6<br>
<input class="fetchCheck" value="7" type="checkbox"> Check 7<br>
<input class="fetchCheck" value="8" type="checkbox"> Check 8<br>

JQuery :

Code :

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

1
2
3
4
5
6
7
8
 
$("input.fetchCheck:checked").each(function () {
		if (selectCheck==""){
			selectCheck = $(this).val();
		}else{
			selectCheck += '_'+$(this).val();
		}
	});

selectCheck sera la variable contenant la liste de toutes les cases cochées. Ensuite à toi de traiter cette donnée.


HTML :

Code :

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

1
2
3
4
5
6
7
8
<input class="fetchRadio" name="radioButton1" value="1" checked="checked" type="radio">Radio 1<br>
<input class="fetchRadio" name="radioButton1" value="2" checked="" type="radio">Radio 2<br>
 
<input class="fetchRadio" name="radioButton2" value="3" checked="" type="radio">Radio 3<br>
<input class="fetchRadio" name="radioButton2" value="4" checked="" type="radio">Radio 4<br>
 
<input class="fetchRadio" name="radioButton3" value="5" checked="" type="radio">Radio 5<br>
<input class="fetchRadio" name="radioButton3" value="6" checked="" type="radio">Radio 6<br>

JQUERY :

Code :

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

1
2
3
4
5
6
7
8
 
	$('input.fetchRadio:checked').each(function () {
		if (selectRadio==""){
			selectRadio = $(this).val();
		}else{
			selectRadio += '_'+$(this).val();
		}
	});

Idem que précédemment.

ARF ! Je me suis fais doubler

[Sayrus]

lol, pas grâve, comme ça il ne pourra pas se tromper

[mfredok]

merci à tous de vos réponses, mais j'ai bien essayé vos codes respectifs..pas de fonctionnement possible...je cherche encore..merci

[llaffont]

Fais voir ton code HTML STP ?

Car c'est étonnant que nos 2 méthodes ne fonctionne pas.

[mfredok]

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
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bouygues-immobilier - Enquête en ligne</title>
 
<link rel="stylesheet" type="text/css"  href="css/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="css/validationEngine.jquery.css" media="screen" title="no title" charset="utf-8" />
<script language="javascript"  type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script language="javascript"  type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
 
 
<script type="text/javascript">
 
$(document).ready( function () {
      $('input.fetchRadio:checked').each(function () {
		if (selectRadio==""){
			selectRadio = $(this).val();
		}else{
			selectRadio += '_'+$(this).val();
			$("label").selectRadio.css({ color: "red"});
		}
	});
 
</script>
 
</head>
 
<body>
 
 
<input class="fetchRadio" name="radioButton1" value="1"  type="radio"><label>Radio 1</label><br>
<input class="fetchRadio" name="radioButton1" value="2"  type="radio"><label>Radio 2</label><br>
 
<input class="fetchRadio" name="radioButton2" value="3"  type="radio"><label>Radio 3</label><br>
<input class="fetchRadio" name="radioButton2" value="4"  type="radio"><label>Radio 4</label><br>
 
<input class="fetchRadio" name="radioButton3" value="5"  type="radio"><label>Radio 5</label><br>
<input class="fetchRadio" name="radioButton3" value="6"  type="radio"><label>Radio 6</label><br>
 
 
 
</body>
</html>

[scourjean]

Essaye ceci :

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
 
// A mettre dans document ready
 
// Decoche tous les radio boutons par defaut
$("input.fetchRadio").attr("checked","");
// On parcourt les radio boutons et on met la couleur rouge au texte si pas cocher
$("input.fetchRadio").each(function(){
	if ($(this).attr("checked")=="checked")
	{
		// OK
		$(this).next("label").css("color","tacouleurnormale");
	}
	else
	{
		$(this).next("label").css("color","red");
	}
});

[mfredok]

Bonjour,

euh..vraiment désolé de répondre après la guerre..mais j'étais sur d'autres choses. J'ai essayé ton code mais cela ne fonctionne pas...

Merci et bon week end

[Arnaud F.]

Bonjour,

c'est normal que le code ne fonctionne pas, il s'exécute une seule fois, et ceux une fois la page chargée...

Il faut faire un "bind" sur l'évènement sur lequel vous souhaitez effectuer votre contrôle.

Imaginons que ça soit sur chaque click d'un des boutons radio:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$(document).ready(function() {
    $('input.fetchRadio').click(function() {
        var _name = $(this).attr("name"); 
 
        // Element selectionné en vert
        $(this).next("label").css("color", "green");
 
        // Element non selectionné en rouge
        $("input[name=" + _name + "]").not(this).next("label").css("color", "red");
    });
});

[mfredok]

Bonsoir,
Merci beaucoup, en effet, cela fonctionne parfaitement.
j'essaye maintenant de faire une grille (avec beaucoup de boutons radios...c'est un questionnaire) ou je veux que chaque ligne de boutons non renseignée mettent en rouge le critère correspondant (td class="critere").

je m'y prend surement mal, peut être serait-ce plus simple de faire une grille en DIV.

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
 
<table>
 
<tr class="q_table_titre_tr"><td></td><td >Très satisfait</td><td class="q_table_titre_td">Plutôt satisfait</td><td class="q_table_titre_td">Plutôt pas satisfait</td></tr>
 
 
<tr>
 
<td class="critere">Clarté des descriptions</td>
 
<td><input type="radio" class="reponse"  name="reponse1"  value="ts"/></td>
<td><input type="radio" class="reponse"  name="reponse1"  value="ps"/</td>
<td><input type="radio" class="reponse"  name="reponse1"  value="pps"/></td>
 
</tr>
 
<tr>
 
<td class="critere">Utilité des informations</td>
 
<td><input type="radio" class="reponse"  name="reponse2"  value="ts"/></td>
<td><input type="radio" class="reponse"  name="reponse2"  value="ps"/</td>
<td><input type="radio" class="reponse"  name="reponse2"  value="pps"/></td>
 
</tr>
</table>

[Arnaud F.]

Utilisez "siblings":

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function() {
    $('input.fetchRadio').click(function() {
        var _name = $(this).attr("name"); 
 
        // Element selectionné en vert
        $(this).next("label").css("color", "green");
        // Critere asocié (this.parent = <td>, puis on cherche .critere)
        $(this).parent().siblings("td.critere").css("color", "yellow");
 
        // Element non selectionné en rouge
        $("input[name=" + _name + "]").not(this).next("label").css("color", "red");
    });
});

[mfredok]

Bonjour et merci..je n'ai pas encore pu tester car j'ai utilisé la façon bête et méchante des else if à la pelle...mais c'est sur, il faut utiliser les parent et siblings.