SO - 21473767

by Varinder

HTML

<div class="form-template"> <!-- will pull form section template from here -->
        <ul data-custom-attributes="" data-id="formSectionIdPrefix" class="form-section">
            <li>
                <input data-custom-attributes="" data-id="firstCheckBoxIdPrefix" data-name="firstCheckBoxNamePrefix" class="main-item checkbox1" type="checkbox" />
                <label>First Item</label>
                
                <ul class="sub-item" style="display:none;">
                    <li>
                        <input type="checkbox" />
                        <label>Sub Item</label>
                    </li>
                    <li>
                        <input class="main-item" data-id="checkBoxSubItem2IdPrefix" data-name="checkBoxSubItem2NamePrefix" type="checkbox" />
                        <label>Second Item</label>
                        
                        <ul class="sub-item" style="display:none;">
                            <li>
                                <label>How many items:</label>
                                <select data-custom-attributes="" data-id="selectItem1IdPrefix" data-name="selectItem1IdPrefix" class="medium" required>
                                    <option value="">---Select---</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </li>
                            <li style="list-style-type: none;">
                                <div data-custom-attributes="" class="dependant-select" data-id="selectItem2IdPrefix"></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    
    <div class="select-template hidden"> <!-- will pull dependant select template -->
        <select class="course_list" data-id="dependantSelectIdPrefix">
            <option value="">--...

CSS

.form-template {
        display:none;
    }
    .form-area li,
    #main-panel li {
        list-style-type: none;
    }
    
    .hidden {
        display:none;
    }

JavaScript

var config = {};

config.formSectionIdPrefix = "pq_entry_";

config.firstCheckBoxIdPrefix = "first_item_";
config.firstCheckBoxNamePrefix = "main_item_";

config.checkBoxSubItem1IdPrefix = "sub_item_";
config.checkBoxSubItem1NamePrefix = "sub_item_";

config.checkBoxSubItem2IdPrefix = "second_item_";
config.checkBoxSubItem2NamePrefix = "main_item_";

config.selectItem1IdPrefix = "item_count_";
config.selectItem2IdPrefix = "item_names_";
config.dependantSelectIdPrefix = "item_";


var $formTemplate = $(".form-template");
var $selectTemplate = $(".select-template");
var $formArea = $(".form-area");
var index = 0;

function getFormTemplate() {
    var $newTemplate = $formTemplate.children().clone(true);
    
    var $formSectionWithEvents = attachEvents( $newTemplate );
    
    var $formSectionWithUpdatedAttributes = incrementAttributes( $formSectionWithEvents );
    
    return $formSectionWithUpdatedAttributes;
}

function incrementAttributes( $formSection ) {
    index = index + 1;
    var $customAttributeElements = $formSection.find("[data-custom-attributes]");
    
    $customAttributeElements.each( function() {
        var $this = $(this);
        
        var idNamePrefix = $this.attr( "data-id" );
        var namePrefix = $this.attr( "data-name" );
        
        var idName = config[idNamePrefix] + index;
        var name = config[namePrefix] + index;
        
        $this.attr( "id", idName );
        $this.attr( "name", name );
    });
    
    return $formSection;
}

function attachEvents( $formSection ) {
    var $mainCheckBoxes = $formSection.find( ".main-item" );
    var $selectBox = $formSection.find( ".medium" );
    var $dependantSelectSection = $formSection.find( ".dependant-select" );
    
    $mainCheckBoxes.on("click", function() {
        var $this = $( this );
        var $subItem = $this.siblings(".sub-item");
        if ( $this.is(":checked") ) {
            $subItem.show();
        } else {
            $subItem.hide();   
        }
   ...