Partage

Addition true - Recolor true

Sujet résolu

11 décembre 2010 à 20:09:32

Bonsoir.

1 - J'aimerais savoir, pour un formulaire par exemple, s'il est possible que mon texte change de couleur quand la valeur de la case est true (cochée).

Par exemple, y'a une case, et un texte en noir "Cochon", je coche la case, et Cochon passe en vert...

2 - J'ai des chekbox associées à des valeurs
( ex : var rap = 10; )
J'ai une dizaine de cases possibles à cocher

J'aimerais savoir comment faire pour additionner seulement celles qui sont cochées !

Merci d'avance,

Bien cordialement,

Urefeu

Desolation

11 décembre 2010 à 20:57:48

Montre le code HTML associé.

http://chez-syl.fr/

Dygeek68

11 décembre 2010 à 21:50:26

Le voici :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
<script type="text/javascript">

</script>





<form method="post" action="calculateur.php" id="">
<div id="resultat"></div>
<p>
    <fieldset><legend><span class="titrecalc"> Calculateur </span></legend><br />
    <label id="notm"><input type="text" name="nom" id="nom" /></label><br /><br />
    <fieldset><legend>Pré-opération</legend><br />
	<label><input type="checkbox" name="rap_hel" id="rap_hel" /></label><br />
	<label><input type="checkbox" name="rap_sta" id="rap_sta" /></label><br />
	<label><input type="checkbox" name="urg" id="urg" /> </label><br /><br />
	</fieldset>
    <fieldset><legend></legend><br />
	<label><input type="checkbox" name="rea" id="rea" /> </label><br />
	<label><input type="checkbox" name="rao" id="rao" /></label><br />
	<label><input type="checkbox" name="gre" id="gre" /> </label><br />
	<label><input type="checkbox" name="perf" id="perf" /> </label><br /><br />
	</fieldset>
	<fieldset><legend></legend><br />
	<label><input type="checkbox" name="medoc" id="medoc" /> </label><br />
	<label><input type="checkbox" name="pret" id="pret" /> </label><br />
	<label><input type="checkbox" name="rap_dom" id="rap_dom" /> </label><br /><br />
	</fieldset>
   
</p><p>
<input type="button" id="ok" value="Calculer" />
<input type="reset" id="reset" value="Vider les champs" /></p>
</fieldset>
</form>

J'ai supprimé du texte, car c'est secret

(juste entre les fieldset et les labels, rien d'important)

Desolation

11 décembre 2010 à 21:52:56

Et avec ça tu veux quoi ? Sois précis...

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 10:28:05

Et bien je l'ai dit dans le premier message...

- Si une case est cochée, le texte à côté passe en vert aulieu de noir

- Chaque case aura une valeur, et je devrais additionner toutes les valeurs dont les cases ont été cochées

Merci d'avance,

Cordialement,

Urefeu

Desolation

12 décembre 2010 à 11:15:46

Citation : Urefeu

- Si une case est cochée, le texte à côté passe en vert aulieu de noir

Je ne vois aucun texte en face des cases.

Citation : Urefeu

- Chaque case aura une valeur, et je devrais additionner toutes les valeurs dont les cases ont été cochées

Commence alors par mettre un attribut value à tes cases.

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 12:49:22

J'avais marqué précédement que c'était fait exprès, le manque de texte...

Mais bon, si tu préfères avec (sans aucun sens bien sûr !)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
<script type="text/javascript">

</script>





<form method="post" action="calculateur.php" id="">
<div id="resultat"></div>
<p>
    <fieldset><legend><span class="titrecalc"> Calculateur </span></legend><br />
    <label id="notm"><input type="text" name="nom" id="nom" />nom</label><br /><br />
    <fieldset><legend>Pré</legend><br />
	<label><input type="checkbox" name="rap_hel" id="rap_hel" value="50" />raph</label><br />
	<label><input type="checkbox" name="rap_sta" id="rap_sta" value="20" />raps</label><br />
	<label><input type="checkbox" name="urg" id="urg" value="120" />urg</label><br /><br />
	</fieldset>
    <fieldset><legend>Mil</legend><br />
	<label><input type="checkbox" name="rea" id="rea" value="20" />rea</label><br />
	<label><input type="checkbox" name="rao" id="rao" value="35" />rao</label><br />
	<label><input type="checkbox" name="gre" id="gre" value="75" />gre</label><br />
	<label><input type="checkbox" name="perf" id="perf" value="30" />perf</label><br /><br />
	</fieldset>
	<fieldset><legend>Aft</legend><br />
	<label><input type="checkbox" name="medoc" id="medoc" value="20" />medoc</label><br />
	<label><input type="checkbox" name="pret" id="pret" value="15" />pret</label><br />
	<label><input type="checkbox" name="rap_dom" id="rap_dom" value="40" />rapd</label><br /><br />
	</fieldset>
   
</p><p>
<input type="button" id="ok" value="Calculer" />
<input type="reset" id="reset" value="Vider les champs" /></p>
</fieldset>
</form>

Et voilà

Desolation

12 décembre 2010 à 13:32:15

J'ai supprimé les id dans chaque checkbox car il y a déjà le name , donc je me suis servi de ce dernier.

J'ai aussi entouré le texte de <span> pour pouvoir leur attribuer un style.

Je suis aussi parti du principe que les valeurs à additionner seront toujours des entiers et non pas des décimales, si cela devait se produire, remplacer parseInt() par parseFloat() .

Aussi, tes <label> étaient inutiles comment ils étaient placés donc je les ai retirés. Voici un exemple de <label> bien inclu :

<form method="post" action="calculateur.php">
<p>
<label for="nom">Nom :</label>
<input type="text" name="nom" id="nom" />
</p>
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[name="calculer"]').click(function() {
	var total = 0;
	
		$('input:checked').each(function() {
			$(this).next('span').css('color', 'green');
			total += parseInt($(this).val());
		});
		
		$('#nom').val(total);
	});
});
</script>

<form method="post" action="calculateur.php">
<p>
        <fieldset><legend><span class="titrecalc"> Calculateur </span></legend>
        <input type="text" name="nom" id="nom" /><br /><br />
	
        <fieldset><legend>Pré-opération</legend>
	<input type="checkbox" name="rap_hel" value="50" /> <span>rap_hel</span><br />
	<input type="checkbox" name="rap_sta" value="20" /> <span>rap_sta</span><br />
	<input type="checkbox" name="urg" value="120" /> <span>urg</span><br /><br />
	</fieldset>
	
        <fieldset>
	<input type="checkbox" name="rea" value="20" /> <span>rea</span><br />
	<input type="checkbox" name="rao" value="35" /> <span>rao</span><br />
	<input type="checkbox" name="gre" value="75" /> <span>gre</span><br />
	<input type="checkbox" name="perf" value="30" /> <span>perf</span><br /><br />
	</fieldset>
	
	<fieldset>
	<input type="checkbox" name="medoc" value="20" /> <span>medoc</span><br />
	<input type="checkbox" name="pret" value="15" /> <span>pret</span><br />
	<input type="checkbox" name="rap_dom" value="40" /> <span>rap_dom</span><br /><br />
	</fieldset>
   
	<input type="button" name="calculer" value="Calculer" />
	<input type="reset" value="Vider les champs" />
	</fieldset>
</p>
</form>

Autre remarque, ceci :
<legend><span class="titrecalc"> Calculateur </span></legend>
peut être remplacé par :
<legend class="titrecalc">Calculateur</legend>

Demande-moi si tu ne comprends pas le code jQuery.

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 13:50:47

- Ce ne sont que des nombres entiers, pas de problème pour ça.
- Les labels font la même chose dans ton cas que dans le mien, à savoir qu'en cliquant sur le texte, la case est cochée ou le champ est sélectionné.

Je vais juste modifier le code histoire d'avoir une div qui s'affiche pour dire le résultat, sinon c'est bon.

Je te remercie !

Il y a juste un problème :
Je souhaiterais que le texte passe vert quand on coche la case, au même moment...

Est-ce possible ?

Cdlt,

Urefeu

EDIT : Pourquoi ce code ne fonctionne-t'il pas ?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[name="calculer"]').click(function() {
	var total = 0;
	
		$('input:checked').each(function() {
			$(this).next('span').css('color', 'green');
			total += parseInt($(this).val());
		});
		
		$('#resultat').val('<fieldset><legend>Résultat</legend><br />Les frais de la personne s\'élèveront à ' + total +'$.<br /></fieldset');
	});            NOTE : CELA NE FONCTIONNE PAS NON PLUS EN .html
});
</script>





<form method="post" action="calculateur.php" id="">
<p>
    <fieldset><legend><span class="titrecalc"> Calculateur d'interventions </span></legend><br />
	<div id="resultat" name="resultat"></div>
    <label id="notm">Nom de<input type="text" name="nom" id="nom" /></label><br /><br />
    <fieldset><legend>Pré</legend><br />
	<label><input type="checkbox" name="rap_hel" id="rap_hel" value="10" /> <span>Ra</span></label><br />
	<label><input type="checkbox" name="rap_sta" id="rap_sta" value="20" /> <span>Raandard</span></label><br />
	<label><input type="checkbox" name="urg" id="urg" value="30" /> <span>Us</span></label><br /><br />
	</fieldset>
    <fieldset><legend>S</legend><br />
	<label><input type="checkbox" name="reanim" id="reanim" value="40" /> <span>Réon</span></label><br />
	<label><input type="checkbox" name="radio" id="radio" value="50" /> <span>Ras</span></label><br />
	<label><input type="checkbox" name="gref" id="gref" value="60" /> <span>ues</span></label><br />
	<label><input type="checkbox" name="perf" id="perf" value="70" /> <span>Mi</span></label><br /><br />
	</fieldset>
	<fieldset><legend>Pos</legend><br />
	<label><input type="checkbox" name="medoc" id="medoc" value="80" /> <span>ents</span></label><br />
	<label><input type="checkbox" name="pret" id="pret" value="90" /> <span>cal</span></label><br />
	<label><input type="checkbox" name="rap_dom" id="rap_dom" value="100" /> <span>Rap</span></label><br /><br />
	</fieldset>
   
</p><p>
<input type="button" name="calculer" value="Calculer les frais" />
<input type="reset" id="reset" value="Vider les champs" /></p>
</fieldset>
</form>

Desolation

12 décembre 2010 à 14:12:16

.val() c'est pour les input.
L'attribut name également (pour form aussi), il n'existe pas pour les div ...

Dans ton cas il faut mettre .html() .

$(document).ready(function() {

	$('input[type="checkbox"]').click(function() {
		($(this).is(':checked')) ? $(this).next('span').css('color', 'green') : $(this).next('span').css('color', 'black');	
	});


	$('input[name="calculer"]').click(function() {
	var total = 0;
	
		$('input:checked').each(function() {
			total += parseInt($(this).val());
		});
		
		$('#resultat').html(total);
	});
});

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 14:22:12

Super, ça marche pour le vert. Par contre, je n'ai toujours pas compris comment faire apparaître, dans une div, un nouveau fieldset résultat, à la fin, par rapport à l'EDIT précédent...

Desolation

12 décembre 2010 à 14:24:56

Je te remets tout le code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function() {

	$('input[type="checkbox"]').click(function() {
		($(this).is(':checked')) ? $(this).next('span').css('color', 'green') : $(this).next('span').css('color', 'black');	
	});

	$('input[name="calculer"]').click(function() {
	var total = 0;
	
		$('input:checked').each(function() {
			total += parseInt($(this).val());
		});
		
		$('#resultat').html('<fieldset>'+total+'</fieldset>');
	});
});
</script>

<form method="post" action="calculateur.php">
<p>
    <fieldset><legend><span class="titrecalc"> Calculateur </span></legend>
    <input type="text" name="nom" id="nom" /><br /><br />
	<div id="resultat"></div>
    <fieldset><legend>Pré-opération</legend>
	<input type="checkbox" name="rap_hel" value="50" /> <span>rap_hel</span><br />
	<input type="checkbox" name="rap_sta" value="20" /> <span>rap_sta</span><br />
	<input type="checkbox" name="urg" value="120" /> <span>urg</span><br /><br />
	</fieldset>
	
    <fieldset>
	<input type="checkbox" name="rea" value="20" /> <span>rea</span><br />
	<input type="checkbox" name="rao" value="35" /> <span>rao</span><br />
	<input type="checkbox" name="gre" value="75" /> <span>gre</span><br />
	<input type="checkbox" name="perf" value="30" /> <span>perf</span><br /><br />
	</fieldset>
	
	<fieldset>
	<input type="checkbox" name="medoc" value="20" /> <span>medoc</span><br />
	<input type="checkbox" name="pret" value="15" /> <span>pret</span><br />
	<input type="checkbox" name="rap_dom" value="40" /> <span>rap_dom</span><br /><br />
	</fieldset>
   
	<input type="button" name="calculer" value="Calculer" />
	<input type="reset" value="Vider les champs" />
	</fieldset>
</p>
</form>

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 14:31:26

Voilà super, mercii

Et euuh ^^" est-il possible de décocher toutes les cases à l'envoi ? Car si je fais juste un refresh sur la page, les cases restent quand même, mais le texte a côté n'est plus vert...

Donc, décocher toutes les cases quand on clique sur Calculer, et puis aussi, [A non, j'ai mal vu pour le "aussi"]

Merci, Ure'

Desolation

12 décembre 2010 à 14:34:15

C'est normal que ça reste quand on actualise, le mieux est d'initialiser les états au chargement. Ajoute ça au début du JS :

$('input[type="checkbox"]').attr('checked', false);
$('#resultat').html('');

http://chez-syl.fr/

Dygeek68

12 décembre 2010 à 14:39:40

Oui, ça enlève quand j'actualise, mais pas quand je clique sur "Calculer"

EDIT : Hum, en passant, c'est possible que le prix s'affiche directement dans le div au fur et à mesure que je coche les cases ?

EDIT2 : J'ai trouvé comment faire en dynamique, je n'ai donc plus aucun problème.

Résolu

EDIT3 : Et bah, ton code à l'air plus compliqué que celui que j'ai fais

Desolation

12 décembre 2010 à 14:51:44

Du coup le bouton "Calculer" ne sert plus à rien.

$(document).ready(function() {

	$('input[type="checkbox"]').attr('checked', false);
	$('#resultat').html('');
	var total = 0;

	$('input[type="checkbox"]').click(function() {
	
		if($(this).is(':checked')) {
			$(this).next('span').css('color', 'green');
			total += parseInt($(this).val());
		} else {
			$(this).next('span').css('color', 'black');
			total -= parseInt($(this).val());
		}
		
		$('#resultat').html('<fieldset>'+total+'</fieldset>');
	});
});

http://chez-syl.fr/