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 : 36056
Envois par mail : 911

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 ?

>> Poster une annotation sur ce script

26 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Hewlett Packard
Espace HP pour les particuliers et petites entreprises.
http://h41257.www4.hp.com...

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 :

56132 membres
8369 comptes CountUs
1541 comptes myCircle

LES FORUMS :

14 forums
39396 topics
189315 messages
>> Les forums

SONDAGE

La mini-astuce "HTML / CSS" du jour par sadike
Vous ne savez pas trop comment vous y prendre pour faire la mise en forme de votre site en XHTML et CSS? Laissez vous guider par le générateur CSSCreator: http://www.csscreator.com/version2/pagelayout.php
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi