if check box is checked display div

Question

I\'m trying to build something like wordpress options for toggling fields visibility when creating and article. What I\'ve build is relying on the $.click function

Answer 1

Assuming that you are externally controlling the checked state of your checkboxes...

Demo: http://jsfiddle.net/zgrRd/5/

In other words, whatever state the checkboxes are in will be evaluated when the page loads, so if a box is not checked, the corresponding element will start out hidden. So if you are setting a value server-side which checks the box, this client-side JavaScript should evaluate it properly.

JavaScript

function evaluate(){
    var item = $(this);
    var relatedItem = $("#" + item.attr("data-related-item")).parent();

    if(item.is(":checked")){
        relatedItem.fadeIn();
    }else{
        relatedItem.fadeOut();   
    }
}

$('input[type="checkbox"]').click(evaluate).each(evaluate);

HTML

Title


  
Title
  
  Lorem



Title


  
Title
  
  Lorem

Note my use of data-* attributes. This avoids using the name attribute of one field to indicate a relationship to another field. You can legally name these attributes whatever you want, as long as they are prefixed with data-.