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>