web-dev-qa-db-fra.com

Comment afficher et masquer les champs de saisie en fonction de la sélection du bouton radio

Voici le code pour afficher les champs de saisie en fonction de la sélection de la radio comme:

SCÉNARIO

<script type="text/javascript">

function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.visibility = 'visible';
    } else {
        document.getElementById('ifYes').style.visibility = 'hidden';
    }

</script>

HTML

Yes
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>No
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">If yes, explain:
    <input type='text' id='yes' name='yes'/>
    <br>What can we do to accommodate you?
        <input type='text' id='acc' name='acc'/>
</div>
   other 3
<input type='text' id='other3' name='other3'>
<br>
    other 4
<input type='text' id='other4' name='other4'>
<br>

Cependant, j'aimerais que les champs de saisie soient masqués (comme sur l'image), et qu'ils n'utilisent aucun espace jusqu'à ce que le bouton radio soit sélectionné, lorsque la radio est sélectionnée, affichez-les avec un effet de fondu ...

Voici le violon :

enter image description here

javascriptjqueryhtml
34
cMinor

Remplacer toutes les occurrences du style visibility par display

display:none //to hide
display:block //to show

Voici mis à jour jsfiddle: http://jsfiddle.net/QAaHP/16/

Vous pouvez le faire en utilisant Mootools ou les fonctions jQuery pour glisser vers le haut ou le bas, mais si vous n'avez pas besoin d'un effet d'animation, c'est probablement trop pour ce dont vous avez besoin.

L'affichage CSS est une approche plus rapide et plus simple.

35
Learner
***This will work.........
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 window.onload = function() {
    document.getElementById('ifYes').style.display = 'none';
    document.getElementById('ifNo').style.display = 'none';
}
function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifNo').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
    } 
    else if(document.getElementById('noCheck').checked) {
        document.getElementById('ifNo').style.display = 'block';
        document.getElementById('ifYes').style.display = 'none';
        document.getElementById('redhat1').style.display = 'none';
        document.getElementById('aix1').style.display = 'none';
   }
}
function yesnoCheck1() {
   if(document.getElementById('redhat').checked) {
       document.getElementById('redhat1').style.display = 'block';
       document.getElementById('aix1').style.display = 'none';
    }
   if(document.getElementById('aix').checked) {
       document.getElementById('aix1').style.display = 'block';
       document.getElementById('redhat1').style.display = 'none';
    }
}
</script>
</head>
<body>
Select os :<br>
windows
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>Unix
<input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="display:none">
Windows 2008<input type="radio" name="win" value="2008"/>
Windows 2012<input type="radio" name="win" value="2012"/>
</div>
<div id="ifNo" style="display:none">
Red Hat<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"value="2008" 

id="redhat"/>
AIX<input type="radio" name="unix" onclick="javascript:yesnoCheck1();"  
value="2012" id="aix"/>
</div>
<div id="redhat1" style="display:none">
Red Hat 6.0<input type="radio" name="redhat" value="2008" id="redhat6.0"/>
Red Hat 6.1<input type="radio" name="redhat" value="2012" id="redhat6.1"/>
</div>
<div id="aix1" style="display:none">
aix 6.0<input type="radio" name="aix" value="2008" id="aix6.0"/>
aix 6.1<input type="radio" name="aix" value="2012" id="aix6.1"/
</div>
</body> 
</html>***
7
radhika

Vous pouvez faire avec très simple étape

$(':radio[id=radio1]').change(function() {
   $("#yes").removeClass("none");
   $("#no").addClass("none");


});
$(':radio[id=radio2]').change(function() {
   $("#no").removeClass("none");
   $("#yes").addClass("none");

});
5
Shube

Vous devez également définir la hauteur de l'élément sur 0 lorsqu'il est masqué. J'ai rencontré ce problème lors de l'utilisation de jQuery. Ma solution consistait à définir la hauteur et l'opacité à 0 lorsqu'il est masqué, puis de modifier height en auto et l'opacité à 1 lorsqu'il est non masqué.

Je recommanderais de regarder jQuery. C'est assez facile à prendre en main et vous permettra de faire des choses comme celle-ci beaucoup plus facilement.

$('#yesCheck').click(function() {
    $('#ifYes').slideDown();
});
$('#noCheck').click(function() {
    $('#ifYes').slideUp();
});

Pour les performances, il est légèrement préférable de modifier le CSS avec jQuery et d'utiliser des animations CSS3 pour la liste déroulante, mais c'est aussi plus complexe. L'exemple ci-dessus devrait fonctionner, mais je ne l'ai pas testé.

3
Carl Vitullo

Utilisez display: none/block, au lieu de visibilité, et ajoutez une marge haut/bas pour l'espace que vous voulez voir UNIQUEMENT lorsque les entrées sont affichées

 function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
           document.getElementById('ifYes').style.display = 'block';
        } else {
           document.getElementById('ifYes').style.display = 'none';
        }
    }

et votre ligne html pour la balise ifYes

<div id="ifYes" style="display:none;margin-top:3%;">If yes, explain:
2
Zale

Utilisez display:none pour ne pas afficher les éléments. Avec JQuery, vous pouvez utiliser fadeIn() et fadeOut() pour masquer/afficher les éléments.

http://www.w3schools.com/jquery/jquery_fade.asp

1
pinmonkeyiii

L'utilisation de la propriété visibility affecte uniquement la visibilité des éléments de la page. ils seront toujours là dans la mise en page. Pour supprimer complètement les éléments de la page, utilisez la propriété display.

display:none // for hiding
display:block // for showing

Assurez-vous de changer votre fichier css pour qu'il utilise l'affichage plutôt que la visibilité.

En ce qui concerne le javascript (ce n'est pas jQuery), assurez-vous de masquer les options par défaut lors du chargement de la page:

<script type="text/javascript">
    window.onload = function() {
        document.getElementById('ifYes').style.display = 'none';
    }

    function yesnoCheck() {
        if (document.getElementById('yesCheck').checked) {
            document.getElementById('ifYes').style.display = 'block';
        } 
        else {
            document.getElementById('ifYes').style.display = 'none';
        }
    }

</script>

Si vous ne l'avez pas déjà fait, je vous conseillerais de jeter un coup d'œil à jQuery. Le code jQuery est beaucoup plus clair et facile à écrire et à comprendre.

http://www.w3schools.com/jquery/default.asp

1
Dolchio