Forums

Hi All,

I am working on a version of this FAQ about Show/hiding a textbox when a checkbox is clicked, and I hit a snag.

I got the basic function of the second example working, but need to make a tweak. I need to show two or more fields with the click of a checkbox. Here is the example:

Click "checkbox_1" and see "textbox_1"
Click "checkbox_2" and see "textbox_2" AND "textbox_3"
Click "checkbox_3" and see "textbox_4" AND "textbox_5" AND "textbox_6"

Any help tweaking the code to make this work would be very appreciated.

Here is the JS as shown in the sample from the FAQ

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['checkbox_1'] = 'textarea_1';
  checkboxes['checkbox_2'] = 'textarea_2';
  checkboxes['checkbox_3'] = 'textarea_3';

  for ( i in checkboxes ) {
    checkbox = $(i);
    textbox = $(checkboxes[i]);
    div = $(textbox.id + '_container_div');
    div.dissolve();
    showHide(i);
    addEventToCheckbox(checkbox);
  }

  function addEventToCheckbox(checkbox) {
    checkbox.addEvent('click', function(event) {
      showHide(event.target.id);
    });
  }
});

function showHide(id) {
  var checkbox, textarea, div;
  if(typeof id == 'undefined') {
    return;
  }
  checkbox = $(id);
  textarea = checkboxes[id];
  div = $(textarea + '_container_div');
  textarea = $(textarea);
  if(checkbox.checked) {
    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;
  }
} 

Thanks in Advance,
Melvins138

Bump. Any suggestions?