JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
          <li>
              <input type="checkbox" /> All
        </li>
          <li>
              <input type="checkbox" id="district" /> District<br />
              <input type="checkbox" class="district"  />
              <label class="district">District1</label>
              <br />
              <input type="checkbox" class="district" /><label class="district">District2</label>
              <ul>
                  <li>
                      <input type="checkbox" /> Area<br />
                      <input type="checkbox" /> Area1<br />
                      <input type="checkbox" /> Area2
                        <ul>
                            <li>
                                <input type="checkbox" /> Category<br />
                                <input type="checkbox" /> Category1<br />
                                <input type="checkbox" /> Category2
                            </li>
                        </ul>
                  </li>                      
              </ul>
          </li>          
</ul><br /><br />
    <ul>
        <li>
            <input type="checkbox" /> Restaurant <br />
            <input type="checkbox" /> Shop <br />
            <input type="Checkbox" /> Houses <br />
        </li>
    </ul>

JavaScript

$('.district').hide();
$("#district").on('change',function () {
    if(this.checked)
    {
        $('.district').show();
    }
    else
    {
        $('.district').hide();
    }
});