Question

I have a form to create events. If an event is repeating, the user can click a checkbox which will load the additional form fields dealing with repeating tasks.

How can I set up the checkbox so that when its clicked the form elements are loaded, and when it’s unchecked the form elements are not shown (or removed if need be)?

Answer 1

$(document).ready(function(){
  // Hide div
  $(".hidden_fields").css("display","none");

  // Add onclick handler to checkbox w/ class 'toggle_hidden_fields'
  $(".toggle_hidden_fields").click(function(){
    if ($(".toggle_hidden_fields").is(":checked")) {
      // Show the hidden div
      $(".hidden_fields").show("fast");
    }
    else {
      // Otherwise, hide it
      $(".hidden_fields").hide("fast");
    }
  });
});

Modified from: http://iamzed.com/2006/12/14/using-jquery-to-show-hide-form-elements-based-on-a-checkbox-selection/

*Tip of the hat to Marc Talbot