Test case à cocher Javascript

Résolu/Fermé
gloutonbargeot Messages postés 349 Date d'inscription vendredi 24 juin 2011 Statut Membre Dernière intervention 15 novembre 2016 - 2 août 2012 à 09:43
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 11 mars 2013 à 21:25
Bonjour,

J'ai parcouru le forum en long en large et en travers, je me suis servi des exemples que j'ai pu trouvé mais rien n'y fait je reste coincé!

Mon problème est le suivant:

J'ai 7 cases à cocher (une pour chaque jour de la semaine):

<input id="jour1" name="jour1" type="checkbox">Lundi
<input id="jour2" name="jour2" type="checkbox">Mardi
<input id="jour3" name="jour3" type="checkbox">Mercredi
<input id="jour4" name="jour4" type="checkbox">Jeudi
<input id="jour5" name="jour5" type="checkbox">Vendredi
<input id="jour6" name="jour6" type="checkbox">Samedi
<input id="jour7" name="jour7" type="checkbox">Dimanche

Je voudrais compter, en javascript, combien de cases sont cochées.

Pour cela, je fais ceci:

function compteJourCoches()
{
for(i=1;i<=7;i++)
{
if(document.getElementById("jour"+i).checked==true)
{
alert("test");
}
}
}

Mais cela ne fonctionne pas et je ne comprends pas pourquoi Oo

Si un âme charitable pouvait m'expliquer pourquoi cela ne fonctionne pas ce serait sympa :)

Merci à tous ceux qui me liront!

A voir également:

2 réponses

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
2 août 2012 à 16:31
Bonjour je suis débutant en javascript et ça ma fait un bonne exercise

voila la solution que j'ai trouver pour compter le nombre de case coché:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
	</head>
	<body>
		<form id="form">
			<input id="jour1" name="jour1" type="checkbox">
			Lundi
			<input id="jour2" name="jour2" type="checkbox">
			Mardi
			<input id="jour3" name="jour3" type="checkbox">
			Mercredi
			<input id="jour4" name="jour4" type="checkbox">
			Jeudi
			<input id="jour5" name="jour5" type="checkbox">
			Vendredi
			<input id="jour6" name="jour6" type="checkbox">
			Samedi
			<input id="jour7" name="jour7" type="checkbox">
			Dimanche
			<input type="submit" value="submit" />
		</form>
		<script type="text/javascript">
			var inputs = document.getElementsByTagName('input');
			var form = document.getElementById("form");

			function test() {
				var c = inputs.length;
				var n = 0;
				for(var i = 1; i < c; i++) {
					if(inputs[i].type == 'checkbox' && inputs[i].checked) {
						n++
					}
				}
				alert(n);
			}


			form.addEventListener('submit', function(e) {

				test();
				e.preventDefault();
			}, true);

		</script>
	</body>
</html>
0
gloutonbargeot Messages postés 349 Date d'inscription vendredi 24 juin 2011 Statut Membre Dernière intervention 15 novembre 2016 123
2 août 2012 à 16:33
Je vais tester tout ca et je te dirais si ta technique secrète fonctionne! Merci à toi! :)
0
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
11 mars 2013 à 21:25
une solution:
par contre le positionnement de tes div est surprenant
<script type="text/javascript">
	function afficher_liste(){
		//parcourir tous les input =>array
		var inputs = document.getElementsByTagName('input');
		for(var i = 1; i < inputs.length; i++) {
			//rechercher les checkbox cochés
			if(inputs[i].type == 'checkbox' && inputs[i].checked) {
				var n = inputs[i].value;
				 document.getElementById("hidden"+n).style.display = "block"
			}
		}
	}
        
    </script>
<style type="text/css">
	#hidden5 { display: none; }
	#hidden4 { display: none; }
	#hidden3 { display: none; }
	#hidden2 { display: none; }
</style>

<p> Vous pouvez sélectionner jusqu'à 5 symptômes avec un minimum de 2. Veuillez choisir le nombre de symptômes dont le patient souffre. Ces symptômes sont regroupés par zone du corps. </p>
<label>2<input type="radio" name="choix" value="2" onclick="afficher_liste();" /></label>
<label> 3 <input type="radio" name="choix" value="3" onclick="afficher_liste();" /></label>
 <label>4<input type="radio" name="choix" value="4" onclick="afficher_liste();" /></label>
 <label> 5 <input type="radio" name="choix" value="5" onclick="afficher_liste();" /></label>
0