You can put elements inside 'checkbox' or 'radio' elements. In this case, dhtmlxForm will define active state of nested elements depending on parent control checked state. In other words, if control is not checked, its nested elements will be not active and vice versa.

Subject to configuration format, in the samples below is shown how to nest 'input' element to checkbox.

XML:

<item type="checkbox" name="def_prod" value="1" label="Definite Product">
    <item type="input" name="product_nm" label="Product Name"/>
</item>
<item type="checkbox" name="all_prod" value="1" label="All Products"/>

JSON:

var formData = [
    {type: "checkbox", name: "def_prod", value: "1", label: "Definite Product", 
        list:[
            {type: "input", name: "product_nm", label: "Product Name"}
        ]},
    {type: "checkbox", name: "all_prod", value: "1", label: "All Products"}
];

HTML:

<li ftype="checkbox" name="def_prod" value="1">Definite Product
    <ul>
        <li ftype="input" name="product_nm">Product Name</li>
    </ul>
</li>
<li ftype="checkbox" name="all_prod" value="1">All Products</li>

You can associate some elements with 'select' control options. In this case dhtmlxForm shows elements associated with selected option and hides others.

The code snippets which shows how to execute the mentioned above nesting are the following:

* XML:

<item type="select" name="country" label="Contry">
    <option value="USA" text="USA">
        <item type="radio" name="city" value="Washington" label="Washington" checked="1"/>
        <item type="radio" name="city" value="Chicago" label="Chicago"/>
    </option>
    <option value="Russia" text="Russia">
        <item type="radio" name="city" value="Moscow" label="Moscow"/>
        <item type="radio" name="city" value="Sochi" label="Sochi"/>
    </option>
</item>

JSON

var formData = [
    {type: "select", name: "country", label: "Country", 
        options:[
            {value: "USA", text: "USA", 
            list:[
               {type: "radio", name: "city", value: "Washington", label: "Washington", checked: true},
               {type: "radio", name: "city", value: "Chicago", label: "Chicago"}
            ]},
            {value: "Russia", text: "Russia", 
            list:[
               {type: "radio", name: "city", value: "Moscow", label: "Moscow"},
               {type: "radio", name: "city", value: "Sochi", label: "Sochi"}
            ]},
        ]}
    ];

HTML:

<li ftype="select" name="country">Country
    <ul>
        <li ftype="option" value="USA">USA
            <ul>
                <li ftype="radio" name="city" value="Washington" checked="true">Washington</li>
                <li ftype="radio" name="city" value="Chicago">Chicago</li>
            </ul>
        </li>
        <li ftype="option" value="Russia">Russia
            <ul>
                <li ftype="radio" name="city" value="Moscow">Moscow</li>
                <li ftype="radio" name="city" value="Sochi">Sochi</li>
            </ul>
        </li>
    </ul>
</li>

Nested Elements