Masquer et afficher en Javascript

désolé pour l'anglais.Masquer et afficher en Javascript

ont des boutons radio dynamiques travaillent cependant, mais je suis nouveau javascript

lorsque vous sélectionnez une option dans une autre Semble que je le cache? répare ça?

RADIOS: • OUI • NON • AUTRES

et se cacher div ...

<div id="hide"> FORM FOR YES </div> 
<div id="hide2">FORM FOR OTHER </div>

lorsque je sélectionne "oui" et "autres" sont comme deux comparaissent divs peut cacher la div "cacher". ceci seulement si je choisis "oui" et alors "oher".

window.onload=function(){ 
    document.getElementById('hide').style.display="none"; 
      document.getElementById('hide2').style.display="none"; 
} 

function possui_dominio() 
{ 
if(document.getElementsByName('form[dominio]')[0].checked) 
document.getElementById('hide').style.display="inline"; 

if(document.getElementsByName('form[dominio]')[1].checked) 
document.getElementById('hide').style.display = 'none'; 
document.getElementById('hide2').style.display = 'none'; 

if(document.getElementsByName('form[dominio]')[2].checked) 
document.getElementById('hide2').style.display="inline"; 
} 

</script>

Merci pour ceux qui me aider, désolé pour le mauvais anglais.

Source

2011-11-13 user1044351

Merci pour toutes les réponses que vous êtes C'est vraiment rapide! Je vous remercie. FIXÉ!! – user1044351

Ceci est un bon exemple de pourquoi il faut ** toujours ** emballer les blocs (conditionnels/en boucle) entre parenthèses. Faire autrement est non seulement de créer du code bâclé, mais il est incroyablement difficile de déboguer ou de comprendre des mois plus tard. – BryanH

Vous devez cacher les autres éléments dans vos fonctions comme celle-ci:

function possui_dominio() 
{ 
    if(document.getElementsByName('form[dominio]')[0].checked){ 
     document.getElementById('hide2').style.display="none"; 
     document.getElementById('hide').style.display="inline"; 
    } 

    if(document.getElementsByName('form[dominio]')[1].checked){ 
     document.getElementById('hide').style.display = 'none'; 
     document.getElementById('hide2').style.display = 'none'; 
    } 

    if(document.getElementsByName('form[dominio]')[2].checked){ 
     document.getElementById('hide2').style.display="inline"; 
     document.getElementById('hide').style.display="none"; 
    } 
}

Source

2011-11-13 17:03:31 nillls

ohhhh = D, Merci a fonctionné parfaitement alors c'est ce qui me manquait. – user1044351

Une optimisation à ceci serait de stocker la collection de formulaires dans une variable comme ceci: var myForm = document.getElementsByName ('form [dominio]'); puis dans les instructions if, utilisez myForm [0] .checked, myForm [1] .checked etc. De cette façon, DOM-traversal ne se produit qu'une seule fois. – nillls

-1

How to use jQuery to show/hide divs based on radio button selection?

nom d'utilisation, pas id (dans ce cas). les noms devraient être les mêmes.

utilise un framework tel que jQuery, qui gère les différences entre les navigateurs beaucoup mieux que si vous utilisiez du JavaScript pur.

et enfin, JavaScript est/non/Java.

Source

2011-11-13 16:58:24

Et JavaScript n'est pas jQuery. Avez-vous vu une phrase telle que "S'il vous plaît suggérer des solutions jQuery pour moi"? –

il était implicite que l'OP aimerait/a/solution. J'ai fourni une solution. Je ne vois pas le votre. –

@KaeVerens quand je vois la plupart des gens demandent jquery je n'ai même pas perdu mon temps avec une alternative pure js, version parce que vous pourriez être critiqué. – david

En Java Script, if déclarations toujours suivre ce schéma:

if (condition) 
    statement;

Si vous voulez exécuter deux instructions au cas où la condition est vraie, vous devez mettre ces déclarations dans des accolades ({}), donc qu'ils sont exécutés tous les deux ensemble:

if (condition) { 
    statement1; 
    statement2; 
}

Votre deuxième déclaration if ressemble à ceci (bien formaté):

if (condition) 
    statement1; 
statement2;

Comme vous le voyez, la deuxième instruction n'a rien à voir avec l'instruction if et est donc toujours exécutée.

Source

2011-11-13 17:02:29 Yogu

C'est l'exemple simple pour vous.

<html> 
<head> 
<title>Hide/Show Pane Javascript</title> 
<script type="text/javascript"> 
    function togglePane(pane_id){ 
    //alert(pane_id) 
     var current_pane = document.getElementById('pane_'+pane_id); 
     //alert(current_pane); 
     if(pane_id == 1){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_2').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 2){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_3').style.display = 'none'; 
     } else if(pane_id == 3){ 
      current_pane.style.display = 'block'; 
      document.getElementById('pane_1').style.display = 'none'; 
      document.getElementById('pane_2').style.display = 'none'; 
     } 
    } 
</script> 
</head> 
<body> 
<input type="radio" name="option" id="option1" value="1" checked="checked" onclick="togglePane(1)"><label for="option1">Yes</label> 
<input type="radio" name="option" id="option2" value="2" onclick="togglePane(2)"><label for="option2">No</label> 
<input type="radio" name="option" id="option2" value="3" onclick="togglePane(3)"><label for="option3">Other</label> 
<div id="pane_1" style="display: block">Yes Block</div> 
<div id="pane_2" style="display: none">No Block</div> 
<div id="pane_3" style="display: none">Other Block</div> 
</body> 
</html>

Source

2011-11-13 17:13:06

Masquer et afficher en Javascript

Répondre

Questions connexes