Selecting selectbox with javascript

Question

Hello,

I have a question about selecting selectboxes with Javascript. I have upload the files on http://www.mikevierwind.nl/javascript/risicoinventarisatie.htm Here you see a table with a lot of questions and radiobuttons. Every question have 2 radiobuttons, yes and no.

When you go to the first question. "Diabetes" Than you choose for the radiobutton "ja" You see that another question will now show. But when I choose for "nee" than the question must be gone. How can I create that with the Javascript? My Javascript code is:

 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

Put the class="diabetesja" to the nee buttons as well, as your code only assigns the click event to the .diabetesja radio buttons..

Alternatively you could add a class class="diabetesnee" to your nee radio buttons and change the

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

to

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

The point is that both radio buttons (Ja and Nee) need to have the click handler..

Answer 2

Well, first of all you need to get your HTML corrected. Each set of "yes" and "no" radiobuttons need to be grouped together with the correct name attribute. This will tell the browser that only one of each set of "yes" and "no" is selectable. The name must be unique for each condition, however. Something like this should do:

<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>

You should also use the for attribute for the label element for accessibility reasons, and try using something else other than tables for marking up this form, but that's not relevant to the question here.

---

Next, you can try simplifying the Javascript code using the change event handler to check for both states, with something like this:

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

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

You have the change the selector $(this).parent().next('.add_qns') to suit your markup. See: http://www.jsfiddle.net/yijiang/BcAwH/ for a live demo.