11548 sujets

JavaScript, DOM et API Web HTML5

Forcer Checkbox

Bonjour à tous,

J'ai utilisé la fonction décrite dans ce post pour afficher et cacher des champs de formulaire en fonction d'une checkbox (qui représente un niveau de difficulté du formulaire) .

Par contre, je souhaiterai forcer par défaut un choix coché avec les champs correspondants cachés ou montrés en fonction, mais je n'y arrive pas..

Si quelqu'un à une idée ?

Merci d'avance
Malheureusement non, les div correspondants ne sont pas cachés si la checkbox est cochée de cette façon...
Ah, bien sur.

J'avais pas pigé ta question, si tu veux mettre un choix défaut tu as deux solutions, la première c'est faire tourner ton programme lors de l'init (au load de la page) afin que tu scannes les différents choix et désigne la div a caché, la deuxième surement plus simple ... c'est de mettre ta checkbox défaut a checked et ton bloc associé a cette checkbox en "display: none;" (dans le css).
Je crois que la meilleure solution est la seconde.
Le seul problème est que avec la solution citée auparavant, je n'avais pas à me soucier de l'état des div à part dans la fonction elle même.
Mon formulaire est très long, et par ce biais, je souhaitais simplifier la visibilité du code.

Comment mettre en place la première solution pour essayer, je suis un peu newbie en codage... Smiley sweatdrop
Je ne sais pas si je suis bien clair...

Le souci est que j'ai 3 checkbox:
Niveau 1
Niveau 2
Niveau 3

Et j'ai de nombreux div, et ceux ci sont affichables si :
Div A Affiché pour niveau 1
Div B affiché pour niveau >1 (c'est à dire 2 et 3)
Div D affiché pour niveau >2 (c'est à 3)

Mais
lorsque que le niveau 1 est coché, Div A est visible.
lorsque que le niveau 2 est coché, Div A et B sont visibles.
lorsque que le niveau 3 est coché, Div A et B et D sont visibles.

Cela fonctionne bien avec la fonction précédemment citée si je coche un niveau, mais si ne fonctionne pas si je force par un CHECKED. et le style display=none serait également fonction du niveau dans la base de données. Car en fait ce formulaire me sert de saisie et de modification des données.

Je ne sais pas si je suis plus clair. Désolé, mais mon niveau en code a atteint ses limites...

Merci pour la patience Smiley biggol
C'est peut être la fatigue mais je comprends pas trop ... lol

Je réfléchirais mieux demain, mais en attendant peux tu montrer un peu ton code afin que je test/comprenne ?
J'ai la fonction suivante en javascript

function radioclick (b)
{document.getElementById('div1').style.display = (b>=1? '':'none');
document.getElementById('div2').style.display = (b>=2? '':'none');
document.getElementById('div3').style.display = (b>=2? '':'none');
document.getElementById('div4').style.display = (b>=3? '':'none');
}


Je l'utilise avec un radio
<input type="radio" name="niveau" value="1" onclick="radioclick(this.value)/>
<input type="radio" name="niveau" value="2" onclick="radioclick(this.value)/>
<input type="radio" name="niveau" value="3" onclick="radioclick(this.value)/>


Je récupère la valeur cochée au premier remplissage du formulaire dans la base de donnée lors de la modification du formulaire par le membre, et je souhaiterai l'afficher en fonction du radio selectionné (à la création).

Si par exemple, le membre a sélectionné le niveau 2, à la modification du formulaire par la suite, je souhaiterai que le niveau 2 soit coché (facile), mais également que les élément div1, div2 et div3 soient visibles.
Si le membre a coché le niveau 1, seul div1 sera visible.

Suis-je plus clair ?

Smiley sweatdrop
Oui c'est beaucoup plus clair !
Alors du coup j'ai testé ce que tu voulais faire, et il fallait juste lancer une fonction javascript au load de ta page. Cette fonction doit simplement parcourir tes inputs radio et récupéré la valeur de l'input coché pour lancer ta fonction "radioclick".

Je me suis fait une page de test pour mieux comprendre, copie colle la et tu comprendra mieux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Solution pour hervesz</title>
		<style type="text/css">
			#div1 {
				background-color: red;
				width : 50px;
				height : 20px;
			}
			#div2 {
				background-color: green;
				width : 50px;
				height : 20px;
			}
			#div3 {
				background-color: blue;
				width : 50px;
				height : 20px;
			}
			#div4 {
				background-color: yellow;
				width : 50px;
				height : 20px;
			}
		</style>
		<script>
			function trouveChecked() {
				// Recuperation des inputs dans la div nommé 'inputRadio' (attention dans cette div que des input radio qui nous interesse!)
				var arrayInput = document.getElementById('inputRadio').getElementsByTagName('input');
				// on boule sur ces inputs
				for(var iter=0; iter<arrayInput.length; iter++) {
					// si l'input est coché -> on exécute la fonction d'affichage des divs 
					// puis on quitte car il ne doit y en avoir qu'une de coché ...
					if( arrayInput[iter].checked == true ) {
						radioclick(arrayInput[iter].value);
						break;
					}
				}
			}
			
			function radioclick(niveau) {
				document.getElementById('div1').style.display = (niveau>=1? '':'none');
				document.getElementById('div2').style.display = (niveau>=2? '':'none');
				document.getElementById('div3').style.display = (niveau>=2? '':'none');
				document.getElementById('div4').style.display = (niveau>=3? '':'none');
			}
		</script>
	</head>
	<body onload="trouveChecked();">
		<div id="inputRadio">
			<input type="radio" name="niveau" value="1" onclick="radioclick(this.value)" /> niveau 1 <br />
			<input type="radio" name="niveau" value="2" onclick="radioclick(this.value)" checked /> niveau 2 <br />
			<input type="radio" name="niveau" value="3" onclick="radioclick(this.value)" /> niveau 3 <br />
		</div>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</body>
</html>
Sujet clos
Aller à