Maintaining checkbox state in jQuery accordion
<p>I have a nested accordion with a checkbox that makes an ajax call if checked, the problem is that the checkbox does not remain checked after the accordion expands. </p>

<pre><code>if (childList.length &gt; 0) {

                list += '&lt;ul class = ui-accordion&gt;';
                for (var j = 0; j &lt; childList.length; j++) {

                    list += '&lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;input type = "checkbox" class = "reqCheckBox" value="' + childList[i].ComponentID + '"/&gt; ' + childList[j].ComponentDesc +'&lt;/a&gt;&lt;/div&gt;';

                    var grandChildList = $.grep(data, function (n, k) {
                        return n.ParentID == childList[j].ComponentID;
                    }, false);

                    if (grandChildList.length &gt; 0) {

                        list += '&lt;ul class = ui-accordion&gt;';


                        for (var k = 0; k &lt; grandChildList.length; k++) {
                            list += '&lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;input type = "checkbox" onclick="getReq(' + grandChildList[i].ComponentID + ')"/&gt;' + grandChildList[k].ComponentDesc + '&lt;/a&gt;&lt;/div&gt;';

                            var greatGrandChildList = $.grep(data, function (n, l) {
                                return n.ParentID == grandChildList[k].ComponentID;
                            }, false);

                            if (greatGrandChildList.length &gt; 0) {

                                list += '&lt;ul class = ui-accordion&gt;';

                                for (var l = 0; l &lt; greatGrandChildList.length; l++) {
                                    list += '&lt;li&gt;&lt;div&gt;&lt;a href="#"&gt;&lt;input type = "checkbox" onclick="getReq(' + greatGrandChildList[i].ComponentID + ')"/&gt;' + greatGrandChildList[l].ComponentDesc + '&lt;/a&gt;&lt;/div&gt;';
                                }

                                list += '&lt;/li&gt;&lt;/ul&gt;';
                            }
                        }

                        list += '&lt;/li&gt;&lt;/ul&gt;';**
</code></pre>

<p>I know that I need to make this unobtrusive but any critiques of my JavaScript code as well would be appreciated as I am a noob.  Thanks!</p>
