toggle div visiblity using prototype.js

Question

I'd this html code:

<li>
    <label>
        <input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
    <div class="input-box">
        <select name="payment[ebzc_method_id]">
            <option value="">Please select...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
        </select>
    </div>
</li>
<li>
    <label>
        <input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
    <div class="input-box">
        <select name="payment[ebzc_method_id]">
            <option value="">Please select...</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </div>
</li>

and I need to toggle the <div class="input-box"> adjacent to the checked radio (name="payment[ebzc_option]") button using prototype.

Can anybody help me to do this? I'd not worked on prototype before.
any hint on selecting radio button by name attribute (name="payment[ebzc_option]") in prototype.js

Answer 1

Set up a function that you can call both at page load and whenever a radio button is clicked.

function setSubmenuVisibility(){
  $$('input[type="radio"]').each(function(elm){
    if(elm.up('label') && elm.up('label').next('div')){
      var sub = elm.up('label').next('div');
      if(elm.checked){
        sub.show();
      }else{
        sub.hide();
      }
     }
   });
 }
 setSubmenuVisibility();
 document.on('click', 'input[type="radio"]', function(evt, elm){
   setSubmenuVisibility();
 });