Sélection de selectbox avec javascript

Question

J'ai une question sur la sélection de selectboxes avec Javascript. J'ai télécharger les fichiers sur http://www.mikevierwind.nl/javascript/risicoinventarisatie.htm Ici vous voyez une table avec beaucoup de questions et de radiobuttons. Chaque question a 2 radiobuttons, oui et non.

Quand vous allez à la première question. "Diabète" Que vous choisissez pour le radiobutton "ja" Vous voyez qu'une autre question va maintenant montrer. Mais quand je choisis pour "nee" que la question doit être parti. Comment puis-je créer cela avec le Javascript? Mon code Javascript est:

var diabetes = false; 
var diabetesvraag = $("#blokken table.lichamelijkegezondheid .diabetesextra") 
var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja") 

diabetesvraag.hide(); 
buttondiabetes.click(function() 
{ 
    if(diabetes == false) 
    { 
    diabetes = true; 
    diabetesvraag.show(); 
    } 

    else 
    { 
    diabetes = false; 
    diabetesvraag.hide(); 
    } 
    return false; 
}); 

Answer 1

Eh bien, tout d'abord de tout ce que vous devez obtenir votre code HTML corrigé. Chaque ensemble de boutons radio "yes" et "no" doit être groupé avec l'attribut name correct. Cela indiquera au navigateur qu'un seul de chaque ensemble de "oui" et "non" est sélectionnable. Le name doit être unique pour chaque condition, cependant. Quelque chose comme cela devrait faire:

<span class="radio"> 
    <input type="radio" name="condition_selection" value="yes" id="yes" /> 
    <label for="yes">Yes</label> 
    <input type="radio" name="condition_selection" value="no" id="no" /> 
    <label for="no">No</label></span> 

Vous devez également utiliser l'attribut for pour l'élément label pour des raisons d'accessibilité, et essayez d'utiliser quelque chose d'autre que les tables de marquage cette forme, mais ce n'est pas pertinente à la question ici .

---

Ensuite, vous pouvez essayer de simplifier le code Javascript en utilisant le gestionnaire d'événements change pour vérifier les deux états, avec quelque chose comme ceci:

$('.add_qns').hide(); 

$('.radio :radio').change(function(){ 
    if(this.value === 'yes'){ 
     $(this).parent().next('.add_qns').show(); 
    } else { 
     $(this).parent().next('.add_qns').hide(); 
    } 
}); 

Vous avez le changement le sélecteur $(this).parent().next('.add_qns') en fonction de votre balisage . Voir: http://www.jsfiddle.net/yijiang/BcAwH/ pour une démo en direct.

Answer 2

Mettre le class="diabetesja" aux boutons Nee ainsi, en tant que votre code affecte uniquement l'événement de clic pour les boutons radio .diabetesja ..

vous pourriez aussi ajouter une classe class="diabetesnee" à votre née boutons radio et changer le

var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja") 

à

var buttondiabetes = $("#blokken table.lichamelijkegezondheid .diabetesja, #blokken table.lichamelijkegezondheid .diabetesnee") 

Le point est que les deux boutons radio (Ja et Nee) doivent avoir le gestionnaire de clic ..