|
|
|
|
Bonjour,
je suis actuellement en stage, et j'ai un petit soucis : j'ai un formulaire assez volumineux, contenant une foulée de radios, checkbox et autres listes. Le probleme, c'est que certains de ces controles ne sont disponible que si l'on coche tel ou tel checkbox, ou si l'on choisit telle ou telle valeur dans une liste.
En, clair, voici un exemple :
<fieldset class="fs_exterieur">
<table>
<tbody><tr>
<td><input type="radio" name="Type_raccordement" value="PitagoraSystem">Raccordement Pitagora</td>
<td><input type="radio" name="Type_raccordement_3" value="Master">Maitre</td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement" value="StandartSystem">Raccordement standard</td>
<td><input type="radio" name="Type_raccordement_3" value="SlaveWithoutButtons">Esclave sans appels palier</td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement_2" value="Simplex">Simplex</td>
<td><input type="radio" name="Type_raccordement_3" value="SlaveWithButtons">Esclave avec appels palier</td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement_2" value="Duplex">Duplex</td>
<td></td>
</tr>
</tbody></table>
</fieldset>
Configuration: Windows XP Internet Explorer 7.0
Salut, oui c'est bien ça.
<html>
<head>
<!-- Début des Fonctions JAVASCRIPT -->
<script>
// ************************
// *** Fonction groupe 3 ***
// ************************
function cacher_groupe3( statut ) {
// boucle sur le groupe de boutons 'Type_raccordement_3'
var radios = document.forms[0].Type_raccordement_3;
for(var i=0; i<radios.length;i++ ) {
// désactive ou active le radio-bouton en fonction du statut
document.forms[0].Type_raccordement_3[i].disabled = (statut ? true : false);
}
// affiche ou cache les champs labels en fonction du statut
document.getElementById('txt1').style.display = (statut ? 'none' : '');
document.getElementById('txt2').style.display = (statut ? 'none' : '');
document.getElementById('txt3').style.display = (statut ? 'none' : '');
}
</script>
<!-- Fin des Fonctions JAVASCRIPT -->
</head>
<body onload="cacher_groupe3(true)">
<form name="myform">
<fieldset class="fs_exterieur">
<table>
<tbody><tr>
<td><input type="radio" name="Type_raccordement" value="PitagoraSystem">Raccordement Pitagora</td>
<td><input type="radio" name="Type_raccordement_3" value="Master"><label id="txt1">Maitre</label></td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement" value="StandartSystem">Raccordement standard</td>
<td><input type="radio" name="Type_raccordement_3" value="SlaveWithoutButtons"><label id="txt2">Esclave sans appels palier</label></td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement_2" value="Simplex" onclick="cacher_groupe3(true)">Simplex</td>
<td><input type="radio" name="Type_raccordement_3" value="SlaveWithButtons"><label id="txt3">Esclave avec appels palier</label></td>
</tr>
<tr>
<td><input type="radio" name="Type_raccordement_2" value="Duplex" onclick="cacher_groupe3(false)">Duplex</td>
<td></td>
</tr>
</tbody></table>
</fieldset>
</form>
</body>
<html>
explication : l'evenement "onclick" appelle la fonction avec en argument 'true' (cacher) ou 'false' (afficher). en l'occurence je n'utilise pas d'id pour les radios, j'identifie le groupe de radio boutons avec var radios = document.forms[0].Type_raccordement_3; puis je fait une boucle sur le contenu, ca evite d'utilisier des id. en revanche pour cache aussi les textes a cotés, on est obligé, c'est pour cela que j'ai rajouté des 'labels'. si tu a besoin de plus d'explications hésite pas ! |
En gros tu a deux moyens de modifier les proprietes d'un objet en javascript.
|