Javascript從嵌套的UL LI複選框中生成遞歸JSON對象

Question

當我們檢查/取消選中時，我有情況從嵌套的UL LI複選框生成類似於下面結構的JSON對象。

<ul class="tree" id="tree"> 
 

 
    <li><input type="checkbox" name="Team1" value="Team1" checked="checked">Team1 <!-- AND 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結構應該是這樣的下方，

{ 
    "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", 
       } 
      ] 
      } 
     ] 
    } 
    ] 
} 

試圖用溶液，其是完全混亂。請提供更好的解決方案。

Answer 1

你可以用遞歸

function createJSON($ul) { 
 
    return $ul 
 
    .children() // get all children (li) 
 
    .filter(function() { // filter li which have checked checkbox 
 
     return $(this).children(':checkbox')[0].checked; // get children checkbox is checked 
 
    }) 
 
    .map(function() { // now generate array using map() 
 
     var obj1 = {}; 
 
     obj1.name = $.trim($(this).contents().filter(function() { // get text content and trim to avoid spaces 
 
     return this.nodeType === 3 && $.trim(this.textContent).length > 0 // check text node and empty string 
 
     }).text()); 
 
     var $ulc = $(this).children('ul'); // get inner children 
 
     if ($ulc.length > 0) // if it have children , use recursion and do the same 
 
     obj1.child = createJSON($ulc); // recursion 
 
     return obj1; 
 
    }).get(); // get the 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 
 
    <!-- AND 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>