Activer ou désactiver la visibilité de l'élément par radio

Ce formulaire comporte un textara caché et une zone de texte visible. Je voudrais échanger la visibilité de ces éléments si l'option « D: » est sélectionné, mais ne savez pas comment vérifier correctement quel bouton la radio est vérifié à tout moment:Activer ou désactiver la visibilité de l'élément par radio

<script language="JavaScript" type="text/javascript"> 

function unhide(event) { 
    event = event || window.event ; 
    target = event.target || event.srcElement; 
    if(target.value === "D:") { 
     if(target.checked) { 
     document.getElementByName('tarea').style.display=''; 
     document.getElementByName('tbox').style.display='none'; 
     } 
    }else { 
     if(target.checked) { 
     document.getElementByName('tarea').style.display='none'; 
     document.getElementByName('tbox').style.display=''; 
     } 
     } 
} 
</script> 
</head> 
<body> 
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded"> 
<input type="radio" name="opttype" value="A:" onclick="unhide(event)" />A: 
<input type="radio" name="opttype" value="B:" onclick="unhide(event)" />B: 
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide(event)" />C: 
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D: 
<br><input type="tbox" name="event" /> 
<br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:none;"></textarea>

Source

2010-07-04 Mose

Deux grandes choses ici. Tout d'abord, vous ne devriez pas joindre votre JavaScript event handlers as HTML attributes. Au lieu de cela, utilisez le "traditional" method (comme indiqué ci-dessous), ou le plus "advanced" method. Deuxièmement, il n'est pas nécessaire de compter sur l'objet événement, ce qui vous libèrera des problèmes de navigateur.

<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded" id="frm-whatever"> 
    <input type="radio" name="opttype" value="A:"/>A: 
    <input type="radio" name="opttype" value="B:"/>B: 
    <input type="radio" name="opttype" value="C:"/>C: 
    <input type="radio" name="opttype" value="D:"/>D: 
    <br> 
    <input type="tbox" name="event" id="inp-tbox"/><br> 
    <textarea name="tarea" style="width:580;height:130;display:none;" id="inp-tarea"></textarea> 
<form> 

<script> 
    var toggleFields = (function() { 
     var inpTxtBox = document.getElementById("inp-tbox"), 
      inpTxtArea = document.getElementById("inp-tarea"); 

     return function(node) { 
      if (node.value == "D:") { 
       inpTxtArea.style.display = 'block'; 
       inpTxtBox.style.display = 'none'; 
      } else { 
       inpTxtArea.style.display = 'none'; 
       inpTxtBox.style.display = 'block'; 
      } 
     }; 
    })(); 

    var radios = document.getElementById("frm-whatever").opttype; 

    for (var i=0, l=radios.length; i<l; ++i) { 
     radios[i].onchange = (function(i) { // closure to lock the value of `i` in this context 
      return function() { // return a function as the event handler 
       toggleFields(radios[i]); 
      } 
     })(i); 
    } 
</script>

Working demo here. Assurez-vous également que le code JavaScript est inclus après le formulaire ou utilisez le onload event.

Source

2010-07-04 08:20:04

Vous monsieur, sont l'homme. – Mose

Ok je dois changer ma réponse précédente parce que j'ai réalisé que j'ai mal lu votre code. getElementByName est incorrect. C'est getElementsByName pour commencer. Aussi, vous n'utilisez pas vérifié comme vous êtes. C'est une propriété booléenne. Vous devriez vérifier la valeur.

Voici un exemple. J'utilise un code javascript basique car il ne semble pas que vous utilisiez des bibliothèques pour vous aider avec ce genre de choses.

for (var i=0; i < document.formname.radiobuttonname.length; i++) 
{ 
    if (document.formname.radiobuttonname[i].checked) 
    { 
     var rad_val = document.formname.radiobuttonname[i].value; 
    } 
}

Source

2010-07-04 06:15:49 spinon

Haha il y a tellement de choses qui ne vont pas avec le code ci-dessus o_0 – Marko

Mettez quatre espaces avant chaque ligne de votre code pour le formater en tant que code. – icktoofay

Ceci est juste une façon basique de lui montrer comment passer facilement les boutons radio et trouver la valeur. Cela peut être fait beaucoup plus propre, mais cela fonctionne et à en juger par le code qu'il a collé, c'est à peu près la même approche qu'il prendrait. Merci pour le conseil sur les quatre espaces. Je l'essaie et parfois ça ne marche pas pour moi. Mais laissez-moi éditer et voir si je peux le faire correctement. – spinon

<script language="JavaScript" type="text/javascript"> 
function unhide(event) { 
    event = event || window.event ; 
    target = event.target || event.srcElement; 
    if(target.value === "D:") 
    { 
     if(target.checked) 
     { 

     } 
    } 
} 
</script> 
</head> 
<body> 
<form method="get" action="/cgi-bin/form.cgi" enctype="application/x-www-form-urlencoded"> 
<input type="radio" name="opttype" value="A:" onclick="unhide()" />A: 
<input type="radio" name="opttype" value="B:" onclick="unhide()" />B: 
<input type="radio" name="opttype" value="C:" checked="checked" onclick="unhide()" />C: 
<input type="radio" name="opttype" value="D:" onclick="unhide(event)" />D: 
<br><input type="tbox" name="event" /><br><textarea name="tarea" rows="8" cols="80" style="width:580;height:130;display:;"></textarea> 
<input type="submit" name="submit" value="Submit" /> 
</form>

Source

2010-07-04 06:52:13

Ne pas boucler sur du tout, juste passer l'élément directement à la fonction

function toggleInput(ele) 
{ 
    if(ele.value === 'D:') { 
     document.getElementsByName('tbox')[0].style.display = 'none'; 
     document.getElementsByName('tarea')[0].style.display = 'block'; 
    } else { 
     document.getElementsByName('tbox')[0].style.display = 'block'; 
     document.getElementsByName('tarea')[0].style.display = 'none'; 
    } 

} 

//In the element tags, use the following 
onclick="toggletInput(this)"

En outre, en ciblant les éléments d'entrée avec getElementsByName peut être salissant ... si possible , ajoutez des identifiants à ces éléments et ciblez-les directement avec getElementById à la place. Le code ci-dessus suppose qu'il n'y a qu'un seul de chaque tbox et tarea ou au moins qu'ils apparaissent en premier dans le DOM, car il cible le premier élément du tableau retourné par getElementsByName.

Source

2010-07-04 07:16:05 tsgrasser

Activer ou désactiver la visibilité de l'élément par radio

Répondre

Questions connexes