2009-05-14 6 views
0

Est-il possible avec javascript, et sans utiliser un framework tel un jquery, d'avoir un formulaire simple avec une liste de cases à cocher ou boutons radio, et si un particulier est sélectionné, développez pour voir plus loin cases à cocher/boutons radio?effondrement d'un formulaire avec javascript

+1

La question est vraiment vague. La réponse est "oui" mais personne ne peut vous aider plus loin que cela sans plus d'informations. – annakata

Répondre

1

Oui, c'est possible, mais beaucoup plus de travail que de le faire avec un framework. Vous devrez écrire le code de traversée DOM pour trouver des éléments dans le formulaire, le code de liaison d'événements pour lier les fonctions aux événements pour les éléments de formulaire (ceci diffère entre IE et non IE), puis utiliser la propriété style.display pour sub -éléments à cacher ou à montrer.

Si vous cherchez à en savoir plus, Quirksmode.org a quelques-unes des meilleures explications de base Javascript que j'ai trouvé.

2

Tout ce que vous pouvez faire dans n'importe quel cadre, vous pouvez faire sans un cadre.

Dans de nombreux cas, les cadres facilitent le levage. Ce que vous voudrez probablement faire est juste avoir un gestionnaire d'événement onclick sur chaque case à cocher ou bouton radio, et quand on clique dessus, puis créer un nouveau div et le peupler avec les informations supplémentaires, ou, si cette information était déjà rempli et était juste caché en utilisant css, puis que le gestionnaire d'événements le rende visible.

Il y a plusieurs façons de faire ce que vous proposez, selon votre vision de l'utilisabilité.

0

Bien sûr, en utilisant les événements onChange et la manipulation de dom ... Vous pourriez également envisager d'écrire vos propres animations, mais vraiment pourquoi si tant de communautés ont fait le travail pour vous.

2
<input ... onclick="toggleDetails(this);" /> 
<div id='detailsView' style='display:none'gt; 
    content to display when checked 
</div> 

... script ... 

function toggleDetails(chk) { 
    document.getelemantById('detailsView').style.display = 
    chk.checked ? "block" : "none"; 
}

En toute honnêteté cependant, en utilisant un cadre comme jQuery serait plus agréable à long terme.

Questions connexes