Show / Hide field according to radio button

Hello all,
I have been searching for long how to be able to perform this. I have found several example in the forum and faq related to dropdown and check box but didn't find any for radio button.
I finally made it (in a dirty way as i use the id of radio button whereas it should be better to use the value, if someone can adapt the code to trigger the function based on radio button value and not on the id, please share too) and I share here for others that may need it:

Javascript code to insert in a Load JS action in the Onload event

var checkbox_id, textarea_id, checkbox, textarea, div;
/* edit the next two lines to match the ids of the elements in your form */
checkbox_id0 = 'input_radio_2_0';
checkbox_id1 = 'input_radio_2_1';
textarea_id = 'textarea';

window.addEvent('domready', function() {
  input_radio_2_0 = $(checkbox_id0);
input_radio_2_1 = $(checkbox_id1);
  textarea = $(textarea_id);
  div = $(textarea_id+'_container_div');
  div.dissolve();
  showHide();
  input_radio_2_0.addEvent('click', showHide);
input_radio_2_1.addEvent('click', showHide);
});

function showHide() {
  if ( input_radio_2_0.checked ) {
    div.reveal();
    textarea.disabled = false;
  } 
if ( input_radio_2_1.checked ) {
    div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}

then set a radio button element in the form named "input_radio_2" and a textbox (or any other element) named "textarea"

HTML code, just in case

<div class="ccms_form_element cfdiv_radio" id="radio_container_div" style=""><label for="radio">Label Text</label><input type="hidden" name="input_radio_2" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="input_radio_2" id="input_radio_2_0" title="" value="No" class="" />
<label for="input_radio_2_0">No</label>
<input type="radio" name="input_radio_2" id="input_radio_2_1" title="" value="Yes" class="" />
<label for="input_radio_2_1">Yes</label>
</div><div class="clear"></div><div id="error-message-input_radio_2"></div></div><div class="ccms_form_element cfdiv_text" id="textarea_container_div" style=""><label for="textarea">Label Text</label><input id="textarea" maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_3" />
<div class="clear"></div><div id="error-message-input_text_3"></div></div>

Someone helped me with my radio buttons...maybe this will help you.

<script type="text/javascript"> 
            function displayForm(drop){ 
                if(drop.value == "1"){ 
                    document.getElementById("form1").style.display = 'block';
                    document.getElementById("form2").style.display = 'none';
                    document.getElementById("form3").style.display = 'none';
                    document.getElementById("form4").style.display = 'none';
                } 
                else if(drop.value =="2"){ 
                    document.getElementById("form1").style.display = 'block';
                    document.getElementById("form2").style.display = 'block';
                    document.getElementById("form3").style.display = 'none';
                    document.getElementById("form4").style.display = 'none'; 
                }
                else if(drop.value =="3"){ 
                    document.getElementById("form1").style.display = 'block';
                    document.getElementById("form2").style.display = 'block';
                    document.getElementById("form3").style.display = 'block';
                    document.getElementById("form4").style.display = 'none'; 
                }
                else if(drop.value =="4"){ 
                    document.getElementById("form1").style.display = 'block';
                    document.getElementById("form2").style.display = 'block';
                    document.getElementById("form3").style.display = 'block';
                    document.getElementById("form4").style.display = 'block';
                } 
                else{ 
                } 
             
            }         
        </script>

I'm thankful for your piece of code, really helpful.

One question, what I should do if I have two radio button boxes?

example:
radio1 > yes no
show and hide textarea1

radio2 > yes no
show hide textarea2

THanks
Matteo

Im in the same boat as Matteo

Wanting to have a text field hidden unless the no radio button is chosen.
i.e.
RADIO
did you find this helpful (yes/no)
IF NO IS CHOSEN
show please explain why text box

Looking on the FAQ i see there is a way to do this with check boxes but struggling to adapt this to radio button values...Any help appreciated

Heres the JS code - please forgive me I am a novice....

var radios;
window.addEvent('domready', function() {
  var i, radiobut, textarea, div, textbox;
  radios = {};
  // link the radio ids and textarea ids here
  radios['explained_implement'] = 'not_explained_implement';
  radios['goals_implement'] = 'no_goals_implement';
  radios['advice_implement'] = 'no_advice_implement';

  for ( i in radios ) {
    radiobut = $(i);
    textbox = $(radios[i]);
    div = $(textbox.id + '_container_div');
    div.dissolve();
    showHide(i);
    addEventToRadio(radiobut);
  }

  function addEventToRadio(radiobut) {
    radiobut.addEvent('click', function(event) {
      showHide(event.target.id);
    });
  }
});

function showHide(id) {
  var radiobut, textarea, div;
  if(typeof id == 'undefined') {
    return;
  }
  radiobut = $(id);
  textarea = radios[id];
  div = $(textarea + '_container_div');
  textarea = $(textarea);
  if ( radiobut.checked.length > 0 && radiobut.checked[0].value == 'No' ) {
      div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
    } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
} 

and heres the HTML if it helps...Just trying to get the first three no answers worked out first then on to the YES 😲 :?

<div class="ccms_form_element cfdiv_text" id="name_implement_container_div" style=""><label for="name_implement">Name</label><input id="name_implement" maxlength="150" size="30" class="name_implement validate['required','alpha']" title="" type="text" value="" name="name_implement" />
<div class="clear"></div><div id="error-message-name_implement"></div></div><div class="ccms_form_element cfdiv_text" id="email_implement_container_div" style=""><label for="email_implement">Email</label><input id="email_implement" maxlength="150" size="30" class="email_implement validate['required','email']" title="" type="text" value="" name="email_implement" />
<div class="clear"></div><div id="error-message-email_implement"></div></div><div class="ccms_form_element cfdiv_radio" id="explained_implement_container_div" style=""><label for="explained_implement">Was your financial plan explained clearly?</label><input type="hidden" name="explained_implement" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="explained_implement" id="explained_implement_0" title="" value="Yes" checked="checked" class="validate['required']" />
<label for="explained_implement_0">Yes</label>
<input type="radio" name="explained_implement" id="explained_implement_1" title="" value="No" class="validate['required']" />
<label for="explained_implement_1">No</label>
</div><div class="clear"></div><div id="error-message-explained_implement"></div></div><div class="ccms_form_element cfdiv_text" id="not_explained_implement_container_div" style=""><label for="not_explained_implement">If no - please explain why?</label><input id="not_explained_implement" maxlength="150" size="30" class="not_explained_implement validate['alphanum']" title="" type="text" value="" name="not_explained_implement" />
<div class="clear"></div><div id="error-message-not_explained_implement"></div></div><div class="ccms_form_element cfdiv_radio" id="goals_implement_container_div" style=""><label for="goals_implement">Have your goals and objectives been met?</label><input type="hidden" name="goals_implement" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="goals_implement" id="goals_implement_0" title="" value="Yes" checked="checked" class="validate['required']" />
<label for="goals_implement_0">Yes</label>
<input type="radio" name="goals_implement" id="goals_implement_1" title="" value="No" class="validate['required']" />
<label for="goals_implement_1">No</label>
</div><div class="clear"></div><div id="error-message-goals_implement"></div></div><div class="ccms_form_element cfdiv_text" id="no_goals_implement_container_div" style=""><label for="no_goals_implement">If no - please explain why?</label><input id="no_goals_implement" maxlength="150" size="30" class="no_goals_implement validate['alphanum']" title="" type="text" value="" name="no_goals_implement" />
<div class="clear"></div><div id="error-message-no_goals_implement"></div></div><div class="ccms_form_element cfdiv_radio" id="advice_implement_container_div" style=""><label for="advice_implement">Was the advice implemented seamlessly</label><input type="hidden" name="advice_implement" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="advice_implement" id="advice_implement_0" title="" value="Yes" checked="checked" class="validate['required']" />
<label for="advice_implement_0">Yes</label>
<input type="radio" name="advice_implement" id="advice_implement_1" title="" value="No" class="validate['required']" />
<label for="advice_implement_1">No</label>
</div><div class="clear"></div><div id="error-message-advice_implement"></div></div><div class="ccms_form_element cfdiv_text" id="no_advice_implement_container_div" style=""><label for="no_advice_implement">If no - please explain why?</label><input id="no_advice_implement" maxlength="150" size="30" class="no_advice_implement validate['alphanum']" title="" type="text" value="" name="no_advice_implement" />
<div class="clear"></div><div id="error-message-no_advice_implement"></div></div><div class="ccms_form_element cfdiv_radio" id="refer_implement_container_div" style=""><label for="refer_implement">Would you refer Edsuplan to collegues and friends?</label><input type="hidden" name="refer_implement" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="radio" name="refer_implement" id="refer_implement_0" title="" value="Yes" class="validate['required']" />
<label for="refer_implement_0">Yes</label>
<input type="radio" name="refer_implement" id="refer_implement_1" title="" value="No" class="validate['required']" />
<label for="refer_implement_1">No</label>
</div><div class="clear"></div><div id="error-message-refer_implement"></div></div><p>If yes enter their details below...</p><div class="ccms_form_element cfdiv_text" id="name1_container_div" style=""><label for="name1">Name</label><input id="name1" maxlength="150" size="30" class="name1 validate['alpha']" title="" type="text" value="" name="name1" />
<div class="clear"></div><div id="error-message-name1"></div></div><div class="ccms_form_element cfdiv_text" id="email1_container_div" style=""><label for="email1">Email</label><input id="email1" maxlength="150" size="30" class="email1 validate['email']" title="" type="text" value="" name="email1" />
<div class="clear"></div><div id="error-message-email1"></div></div><div class="ccms_form_element cfdiv_text" id="name2_container_div" style=""><label for="name2">Name</label><input id="name2" maxlength="150" size="30" class="name2 validate['alpha']" title="" type="text" value="" name="name2" />
<div class="clear"></div><div id="error-message-name2"></div></div><div class="ccms_form_element cfdiv_text" id="email2_container_div" style=""><label for="email2">Email</label><input id="email2" maxlength="150" size="30" class="email2 validate['email']" title="" type="text" value="" name="email2" />
<div class="clear"></div><div id="error-message-email2"></div></div><div class="ccms_form_element cfdiv_text" id="name3_container_div" style=""><label for="name3">Name</label><input id="name3" maxlength="150" size="30" class="name3 validate['alpha']" title="" type="text" value="" name="name3" />
<div class="clear"></div><div id="error-message-name3"></div></div><div class="ccms_form_element cfdiv_text" id="email3_container_div" style=""><label for="email3">Email</label><input id="email3" maxlength="150" size="30" class="email3 validate['email']" title="" type="text" value="" name="email3" />
<div class="clear"></div><div id="error-message-email3"></div></div><div class="ccms_form_element cfdiv_checkboxgroup" id="important_appoint_container_div" style=""><label for="important_appoint">What are most important to you when choosing a financial planner?</label><input type="hidden" name="important_appoint" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="checkbox" name="important_appoint[]" id="important_appoint_0" title="" value="honesty/integrity" class="validate['group[17]']" />
<label for="important_appoint_0">honesty/integrity</label>
<input type="checkbox" name="important_appoint[]" id="important_appoint_1" title="" value="trusted source of advice" class="validate['group[17]']" />
<label for="important_appoint_1">trusted source of advice</label>
<input type="checkbox" name="important_appoint[]" id="important_appoint_2" title="" value="specifically an education specialist" class="validate['group[17]']" />
<label for="important_appoint_2">specifically an education specialist</label>
<input type="checkbox" name="important_appoint[]" id="important_appoint_3" title="" value="value for money" class="validate['group[17]']" />
<label for="important_appoint_3">value for money</label>
</div><div class="clear"></div><div id="error-message-important_appoint"></div></div><div class="ccms_form_element cfdiv_textarea" id="comments_appoint_container_div" style=""><label for="comments_appoint">Any further comments to improve our service?</label><textarea id="comments_appoint" cols="45" rows="12" class="comments_appoint validate['required']" title="" name="comments_appoint"></textarea>
<div class="clear"></div><div id="error-message-comments_appoint"></div></div><div class="ccms_form_element cfdiv_text" id="chrono_verification1_container_div" style=""><label>Enter the code</label><input maxlength="5" size="5" class="chrono_captcha_input" title="" type="text" value="" name="chrono_verification" />
{chronocaptcha_img}<div class="clear"></div><div id="error-message-chrono_verification"></div></div><div class="ccms_form_element cfdiv_submit" id="input_submit_191_container_div" style="text-align:left"><input name="input_submit_19" class="jfbutton" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_19"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>