title: Serialize Form to Nested JSON w/ JQuery
body: <p>Apologies if this has been asked...but I can't find (or I am using completely wrong terms...)</p>
  
  <p>I have a form like this:</p>
  
  <pre><code>&lt;form&gt;
    &lt;div&gt;
    &lt;input name="[0].RoleId" type="hidden" value="1"&gt;
    &lt;input name="[0].RoleName" type="hidden" value="Administrator"&gt;
    &lt;input name="[0].Selected" type="checkbox" checked="checked" &gt;
    &lt;span&gt;Administrator&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div&gt;
    &lt;input name="[1].RoleId" type="hidden" value="2"&gt;
    &lt;input name="[1].RoleName" type="hidden" value="Manager"&gt;
    &lt;input name="[1].Selected" type="checkbox" &gt;
    &lt;span&gt;Manager&lt;/span&gt;
    &lt;/div&gt;
  
    etc...
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I would like to convert this into the following json:</p>
  
  <pre><code>   roles [
       {
         "RoleId" : "1",
         "RoleName" : "Administrator",
         "Selected" : "checked"
       },
       {
         "RoleId" : "2",
         "RoleName" : "Manager",
         "Selected" : "unchecked"
       }
     ]
  </code></pre>
  
  <p>I am using ASP.Net MVC 3 to generate input elements. Basically what I am trying to do is the following...</p>
  
  <p>I have a user screen. From there users can select from a list of roles (displayed in jquery ui dialog). When user selects role, and click "OK" the pop up closes, and they will see the selected roles in the user screen. I am planning on using <a href="http://api.jquery.com/jQuery.data/" rel="nofollow">jquery data</a>) to store the data selected in dialog, then I need to parse and add to the user screen. This is all client side until they click on Save in the user screen. </p>