How to use jQuery to show content based on whether radio button is checked.

Question

Hi. I'm stuck on something. I have a form that has fields which only show when a particular radio button is checked. This is easy enough to when someone is filling out the form for the first time using the following code.

HTML

<fieldset id="question">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" id="answerYes" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" id="answerNo" type="radio" value="0" />
</fieldset>

jQuery

$("#subQuestion").hide();
$("#answerYes").click(function() {
  $("#subQuestion").show();
});
$("#answerNo").click(function() {
  $("#subQuestion").hide();
});

This logic breaks down though when someone comes back to the form to edit it. In that case, the fields are prepopulated so the click function doesn't exist. How can I use jQuery to show #subQuestion if #answerYes is checked when the page loads.

Thanks very much! Marcus

Answer 1

Attach the logic to the change() event*. Furthermore, you can use dthe :checked selector to get the currently-selected radio button.

<input name="food" type="radio" value="apples" />
<input name="food" type="radio" value="oranges" />

--

$(":radio[name='food']").change(function(){
  var newVal = $(":radio[name='food']:checked").val();
  if (newVal == "apples") {
    $("#someBox").show();
  } else {
    $("#someBox").hide();
  }
});

^{* Some have reported isues with change, and have instead
used click() to handle the logic}

Answer 2

Try adding a $(document).ready() handler to your page...

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $("#subQuestion").hide();
  if ($("#answerYes:checked").length > 0){ $("#subQuestion").show(); }

  // add functionality for the onclicks here
  $("#answerYes").click(function() {
    $("#subQuestion").show();
  });

  $("#answerNo").click(function() {
    $("#subQuestion").hide();
  });
});

This handler will fire off once the page is completely loaded (and dynamically pre-populated with values)

Answer 3

Keep all the rendering logic in a single function, and call that function when the document comes back:

function renderSubquestion() {
  $('#subQuestion').toggle($("#answerYes").attr('checked'));
}

$(function(){
  $('#answerNo').click(renderSubquestion);
  $('#answerYes').click(renderSubquestion);
  renderSubquestion();
}

Answer 4

If the answer is on the server side, like via PHP, then you should just set the style of #subQuestion using your server side code:

if($databaseFieldForAnswer != 1){
    $subDiv = '<div style=\"visibility: hidden\"></div>';
}

...better yet, assign a class that handles whether the div is shown or not.