如果复选框依赖，如何使用复选框过滤数据？

Question

如何使用复选框过滤数据，这样当我点击状态时，必须显示状态数据。由于州和城市依赖，因此必须显示城市复选框城市数据。

的index.php

function getValue(c: Column) {
  return ((c: any): DataColumn).value || ((c: any): CalculatedColumn).calculation;
}

ajaxData.php

<div class="container-fluid">
  <form method="get" id="search_form">

    <div class="row">
      <div id="find"></div>
      <!-- sidebar -->
      <aside class="col-lg-3 col-md-4">

        <div class="panel list">
          <div class="panel-heading">
            <h3 class="panel-title" data-toggle="collapse" data-target="#panelOne" aria-expanded="true">State</h3>
          </div>
          <div class="panel-body collapse in" id="panelOne">
            <div id="state-filter">
              <ul class="list-group" id="scroll">
               <?php
                    include('config.php');
                    $query = $db->query("SELECT * FROM indian_statemaster ORDER BY statename ASC");
                    $rowCount = $query->num_rows;
                ?>
                <?php

                    if($rowCount > 0)
                    {
                   $n = 1;
                   while($row = $query->fetch_assoc())
                       { ?>

                <li class="list-group-item">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" value="<?php echo $row['stateid']; ?> " name=="state[]" id="state<?php echo $n++ ; ?>" class="sort_rang">&nbsp;&nbsp;
                      <?php echo $row[ 'statename']; ?>
                    </label>
                  </div>
                </li>
                <?php }}?>
                <input type="hidden" value="<?php echo $n ;?> " id="num">
                </label>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel list">
          <div class="panel-heading">
            <h3 class="panel-title" data-toggle="collapse" data-target="#panelTwo" aria-expanded="true">City</h3>
          </div>
          <div class="panel-body collapse in" id="panelTwo">
            <div id="city-filter">
              <ul class="list-group" id="scroll">
                <li class="list-group-item">
                  <div class="checkbox" style="margin-left: 20px;">
                    <span class="sort_rang" id="city"></span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </aside>

    </div>
  </form>
</div>