jquery - Javascript generate recursive JSON object from nested UL LI check box -

i have situation generate json object below structure nested ul li checkbox when checked/uncheck.

<ul class="tree" id="tree">        <li><input type="checkbox" name="team1" value="team1" checked="checked">team1 <!-- , should check here -->          <ul>              <li><input type="checkbox" name="one" value="team1 child1" checked="checked">team1 child1</li>              <li><input type="checkbox" name="two" value="team1 child2">team1 child2</li>              <li><input type="checkbox" name="three" value="team1 child3" checked="checked">team1 child3 <!-- should check here -->                  <ul>                      <li><input type="checkbox" name="four" value="team1 child3 - child1" checked="checked">team1 child3 - child1</li>                      <li><input type="checkbox" name="five" value="team1 child3 - child2">team1 child3 - child2</li> <!-- check here -->                  </ul>              </li>          </ul>      </li>        <li><input type="checkbox" name="six" value="team2">team2</li>        <li><input type="checkbox" name="seven" value="team3" checked="checked">team3          <ul>              <li><input type="checkbox" name="eight" value="team3 child1">team3 child1</li>              <li><input type="checkbox" name="nine" value="team3 child2" checked="checked">team3 child2                  <ul>                      <li><input type="checkbox" name="ten" value="team3 child2 - child1"  checked="checked">team3 child2 - child1</li>                      <li><input type="checkbox" name="eleven" value="team3 child2 - child2" checked="checked">team3 child2 - child2</li>                  </ul>              </li>          </ul>      </li>    </ul>

json structure should below,

{     "team" : [     {       "name" : "team1",       "child" : [           {           "name" : "team1 child1",                 },           {           "name" : "team1 child3",           "child" :[                 {                     "name" : "team1 child3- child1",                 }             ]           }       ]     },     {       "name" : "team3",       "child" : [           {           "name" : "team3 child2",           "child" :[                 {                     "name" : "team3 child2- child1",                 },                 {                     "name" : "team3 child2- child2",                 }             ]           }       ]     }     ] } 

tried solution mess. please advise better solution.

you can recursion

function createjson($ul) {    return $ul      .children() // children (li)      .filter(function() { // filter li have checked checkbox        return $(this).children(':checkbox')[0].checked; // children checkbox checked      })      .map(function() { // generate array using map()        var obj1 = {};         obj1.name = $.trim($(this).contents().filter(function() { // text content , trim avoid spaces          return this.nodetype === 3 && $.trim(this.textcontent).length > 0 // check text node , empty string        }).text());        var $ulc = $(this).children('ul'); // inner children        if ($ulc.length > 0) // if have children , use recursion , same          obj1.child = createjson($ulc); // recursion        return obj1;      }).get(); // result array  }  $(':checkbox').change(function() {    $('#res').html(json.stringify(createjson($('#tree')), null, 3))  }).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <pre id="res"></pre>    <ul class="tree" id="tree">      <li>      <input type="checkbox" name="account_settings" value="yes" checked="checked">team1      <!-- , should check here -->      <ul>        <li>          <input type="checkbox" name="one" value="one" checked="checked">team1 child1</li>        <li>          <input type="checkbox" name="two" value="two">team1 child2</li>        <li>          <input type="checkbox" name="user_roles" value="user_roles">team1 child3          <!-- should check here -->          <ul>            <li>              <input type="checkbox" name="user_role" value="add" checked="checked">team1 child3 - child1</li>            <li>              <input type="checkbox" name="user_role" value="delete">team1 child3 - child2</li>            <!-- check here -->          </ul>        </li>      </ul>    </li>      <li>      <input type="checkbox" name="rl_module" value="yes">team2</li>      <li>      <input type="checkbox" name="rl_module" value="yes" checked="checked">team3      <ul>        <li>          <input type="checkbox" name="vat" value="yes">team3 child1</li>        <li>          <input type="checkbox" name="bank_account" value="yes">team3 child2          <ul>            <li>              <input type="checkbox" name="view" value="yes" checked="checked">team3 child2 - child1</li>            <li>              <input type="checkbox" name="crud" value="yes" checked="checked">team3 child2 - child2</li>          </ul>        </li>      </ul>    </li>    </ul>