11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/cacher des inputs à patir d'une case à coché

Bonjour,

Pourriez vous m'aider sur un petit soucis pour cacher une série de cases à cocher à partir d'un bouton à cocher

J'arrive bien a cacher les cases mais les textes ne sont pas cacher
Comment faire?

voici mon code


<!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=iso-8859-1" />
<title>Document sans nom</title>
<script language="Javascript">
// ==================
//	Activations - Désactivations
// ==================
function GereControle(Controleur, Controle, Masquer) {
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
	if (Masquer=='1')
		objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
	else
		objControle.disabled=(objControleur.checked==true)?false:true;
	return true;
}
</script>

</head>

<body>
<input type="checkbox" id="chkb_10" onClick="GereControle('chkb_10', 'texte_10', '1');
GereControle('chkb_10','liste_10', '1');
GereControle('chkb_10','liste_11', '1');
GereControle('chkb_10','liste_12', '1');
GereControle('chkb_10','liste_13', '1');
GereControle('chkb_10','liste_14', '1');
GereControle('chkb_10','liste_15', '1');
GereControle('chkb_10','liste_16', '1');
" CHECKED>&nbsp;<label for="chkb_10">Contrôle de "texte_10" et "liste_10"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="texte_10" value="Contenu de texte_10">
<br /><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox" id="liste_10" checked="checked"  />
Comptabilité<br />
<input type="checkbox" id="liste_11" checked="ckecked" />Finance<br />
<input type="checkbox" id="liste_12" checked="ckecked" />Marketing<br />
<input type="checkbox" id="liste_13" checked="ckecked" />Achats<br />
<input type="checkbox" id="liste_14" checked="ckecked" />Ventes<br />
<input type="checkbox" id="liste_15" checked="ckecked" />Langue<br />
<input type="checkbox" id="liste_16" checked="ckecked" />Secretariat<br />
</body>
</html>


Merci à tous

jeje
Salut,

Disons qu'un code affiché comme cela sans explication, c'est dur de pouvoir t'aider.
Si tu as un groupe d'élément a caché il sera souvent plus simple de regrouper tout ces éléments dans conteneur (ici la div ayant pour id checkBoxGroupe) , puis d'affecter ta fonction sur le conteneur du tout.


<!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=iso-8859-1" />
<title>Document sans nom</title>
<script language="Javascript">
// ==================
//	Activations - Désactivations
// ==================
function GereControle(Controleur, Controle, Masquer) {
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
	if (Masquer=='1')
		objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
	else
		objControle.disabled=(objControleur.checked==true)?false:true;
	return true;
}
</script>

</head>

<body>
<input type="checkbox" id="chkb_10" onClick="GereControle('chkb_10', 'checkBoxGroupe', '1');" CHECKED>
<label for="chkb_10">Contrôle de "texte_10" et "liste_10"</label>
      
<input type="text" id="texte_10" value="Contenu de texte_10">
<br /><br />
      
<input type="checkbox" id="liste_10" checked="checked"  />
Comptabilité<br />


<div id="checkBoxGroupe">

	<input type="checkbox" id="liste_11" checked="ckecked" />Finance<br />
	<input type="checkbox" id="liste_12" checked="ckecked" />Marketing<br />
	<input type="checkbox" id="liste_13" checked="ckecked" />Achats<br />
	<input type="checkbox" id="liste_14" checked="ckecked" />Ventes<br />
	<input type="checkbox" id="liste_15" checked="ckecked" />Langue<br />
	<input type="checkbox" id="liste_16" checked="ckecked" />Secretariat<br />

</div>


</body>
</html>



J'ai mis un simple div en exemple pour plus clarté, mais pourquoi ne pas utiliser un <fieldset> comme conteneur avec des <label> correspondant a chaque checkbox.

Bonne continuation.
Modifié par Citron.mecanik (22 Sep 2008 - 01:01)
Sujet clos
Aller à