Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Activer/Afficher un champ en fonction de checkbox ou radio

Script posté par :

EricM
Vous aussi, postez vos scripts en cliquant ici.

Description

Ce script permet d'activer/désactiver ou d'afficher/masquer un objet (texte, liste, div etc...) suivant si un radio ou une checkbox donnés est cochée.
Les paramètres sont :
- L'id de l'objet (radio ou checkbox) qui controle
- L'id de l'objet (input, select...) qui est controlé
- L'indicateur de masquage : si '1', le "contrôlé" sera masqué, sinon il sera désactivé
Compatible FF.

Compatibilité :

	FireFox : Toutes versions
	Mozilla : 1 et +
	Netscape Navigator : 6 et +
	Internet Explorer : 5 et +

Ce script utilise le DHTML

Chiffres :

Date de création : 9/12/2005
Dernière modif : -
Visites de la page : 43911
Envois par mail : 1005

Exemple :

Exemples de désactivations :

Contrôle de "texte_1"

Active de "liste_1"
Désactive de "liste_1"

Exemples de masquage :

Contrôle de "texte_10"

Active de "liste_10"
Désactive de "liste_10"

Le code :

Entre <HEAD> et </HEAD> :

Entre <BODY> et </BODY> :

Exemples de désactivations :<br /><br />
<input type="checkbox" id="chkb_1" onClick="GereControle('chkb_1', 'texte_1', '0');" CHECKED>&nbsp;<label for="chkb_1">Contrôle de "texte_1"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="texte_1" value="Contenu de texte_1">

<br /><br />
<input type="radio" id="radio_1" name="radios" onClick="GereControle('radio_1', 'liste_1', '0');" CHECKED>&nbsp;<label for="radio_1">Active de "liste_1"</label>
<br />
<input type="radio" id="radio_2" name="radios" onClick="GereControle('radio_1', 'liste_1', '0');">&nbsp;<label for="radio_2">Désactive de "liste_1"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="liste_1">
	<option value="1">Ligne 1</option>
	<option value="2">Ligne 2</option>
	<option value="3">Ligne 3</option>
</select>

<br /><br /><br /><br />
Exemples de masquage :<br /><br />

<input type="checkbox" id="chkb_10" onClick="GereControle('chkb_10', 'texte_10', '1');" CHECKED>&nbsp;<label for="chkb_10">Contrôle de "texte_10"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="texte_10" value="Contenu de texte_10">

<br /><br />
<input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');" CHECKED>&nbsp;<label for="radio_10">Active de "liste_10"</label>
<br />
<input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');">&nbsp;<label for="radio_20">Désactive de "liste_10"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="liste_10">
	<option value="1">Ligne 1</option>
	<option value="2">Ligne 2</option>
	<option value="3">Ligne 3</option>
</select>

Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript

Les annotations des visiteurs :

De EricM - le 04-04-2006

Suite à plusieurs questions d'utilisateurs, voici la manière de cacher ou masquer un champ au chargement de la page (il sont affichés / activés dans le script original):

Enlever la proriété CHECKED de la checkbox concernée et appeler la fonction de contrôle sur l'évènement onload du tag <body> (déclenché au chargement de la page)

<body onload="GereControle('chkb_1', 'texte_1', '1');">

le CHECKED que vous avez enlevé sera alors pris en compte à l'ouverture.

De rarapetou - le 27-01-2007

bonjour,

pouvez vous donner un exemple sur 3 radio différente.

J'arrive à en faire une mais des que j'en rajoute ca crée des conflis!

(radio qui efface et affiche, pas de grisé)

Merci d'avance

Rémi

De darlinho27 - le 08-05-2008

comment faire pour afficher/masquer plusieurs objets (texte, liste, div etc...) suivant si un radio ou une checkbox donnés est cochée.

De Tuttu - le 21-11-2008

Bonjour et merci pour ce super script !

Aujourd'hui je cherche à l'utiliser sur des class et non pas des Id mais je bloque un peu.

Vous qui avez fait le code, pensez-vous que ça soit faisable ou faut-il écrire un code complètement nouveau ?

De hypsilum - le 15-12-2009

Bonjour tout le monde,

J'ai une petite question par rapport à la méthode ( rajouter onload="GereControle('chkb_1', 'texte_1', '1')"; dans le <body> de la page) pour que la fonction qui fait disparaitre les <input type="text"> soit prise en compte au chargement de la page.

Ma question est la suivante, en fait sur mon formulaire, j'ai aussi, un calendrier qui s'affiche dans une <div> quand on click dessus et quand je met les fonctions onload="GereControle('chkb_1', 'texte_1', '1')"; dans la balise <body>, l'affichage de se calendrier, ne se fait plus...

J'ai fait quelques différents test, sans résultats...
Est-ce que quelqu'un aurais été confronté à se même problème? On ne sait jamais...

Bonne journée tout le monde
Hypsilum

>> Poster une annotation sur ce script

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Dell
Dell est le leader de la distribution de PC uniquement en ligne et par telephone.
http://www.dell.fr

Cat : Hardware
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

61306 membres
7190 comptes CountUs
1721 comptes myCircle

LES FORUMS :

14 forums
39941 topics
190891 messages
>> Les forums

SONDAGE

La mini-astuce "Navigateur" du jour par chrislebouler
La fonction agrandissement de texte existe sur tous les navigateurs. Le moyen le plus universel pour l'utiliser?... Ctrl + molette centrale de la souris.
Plusieurs avantages : pour IE pas besoin de l'onglet affichage, pour les Geckos agrandissement + progressif que l'option Ctrl ++.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi