JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="MainContent_tvServices">
  <table cellpadding="0" cellspacing="0" style="border-width:0;">
    <tbody>
      <tr>
        <td></td>
        <td style="white-space:nowrap;">
          <input type="checkbox" name="MainContent_tvServicesn0CheckBox" id="MainContent_tvServicesn0CheckBox"><a class="MainContent_tvServices_0" href="javascript:__doPostBack('ctl00$MainContent$tvServices','s2')" onclick="TreeView_SelectNode(MainContent_tvServices_Data, this,'MainContent_tvServicest0');" id="MainContent_tvServicest0">Web Service</a></td>
      </tr>
    </tbody>
  </table>
  <table cellpadding="0" cellspacing="0" style="border-width:0;">
    <tbody>
      <tr>
        <td> </td>
        <td style="white-space:nowrap;">
          <input type="checkbox" name="MainContent_tvServicesn1CheckBox" id="MainContent_tvServicesn1CheckBox"><a class="MainContent_tvServices_0" href="javascript:__doPostBack('ctl00$MainContent$tvServices','s3')" onclick="TreeView_SelectNode(MainContent_tvServices_Data, this,'MainContent_tvServicest1');" id="MainContent_tvServicest1">Store Service</a></td>
      </tr>
    </tbody>
  </table>
  <table cellpadding="0" cellspacing="0" style="border-width:0;">
    <tbody>
      <tr>
        <td>
          <a id="MainContent_tvServicesn2" href="javascript:TreeView_ToggleNode(MainContent_tvServices_Data,2,document.getElementById('MainContent_tvServicesn2'),' ',document.getElementById('MainContent_tvServicesn2Nodes'))"> </a>
        </td>
        <td style="white-space:nowrap;">
          <input type="checkbox" name="MainContent_tvServicesn2CheckBox" id="MainContent_tvServicesn2CheckBox"><a class="MainContent_tvServices_0" href="javascript:__doPostBack('ctl00$MainContent$tvServices','s4')" onclick="TreeView_SelectNode(MainContent_tvServices_Data, this,'MainContent_tvServicest2');" id="MainContent_tvServicest2">SMS Service</a></td>
      </tr>
    </tbody>
  </table>
  <div id="MainContent_tvServicesn2Nodes" style="display: block;">
    <table...

JavaScript

//  $(function () {
      $(document).on("click", "#MainContent_tvServices  input[type=checkbox]", function(e) {

        var table = $(this).closest("table");
        if (table.next().length > 0 && table.next("div")) {
          //Is Parent CheckBox
          var childDiv = table.next("div");
          var isChecked = $(this).is(":checked");
  
          $(childDiv).find("input[type=checkbox]").each(function() {
            if (isChecked) {
              $(this).prop("checked", true);
            } else {
              $(this).prop("checked", false);
            }
          });
        } else {
          //Is Child CheckBox
          var parentDIV = $(this).closest("div");
          if ($("input[type=checkbox]", parentDIV).length === $("input[type=checkbox]:checked", parentDIV).length) {
            $("input[type=checkbox]", parentDIV.prev()).prop("checked", true);
          } else {
            $("input[type=checkbox]", parentDIV.prev()).prop("checked", false);
          }
        }
      });
      //  $(function () {
     
      // })

      // })