JSFiddle - React, Tailwind, and code Playground

by mdineshkumarcs

HTML

<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>

JavaScript

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();