JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div class="box country active">
  <div class="item">
    <ul>
      <li>
        <div class="country-name">
          <div class="checkbox">
            <input type="checkbox" name="country[]" checked="checked" id="country_1" value="RU">
            <label for="country_1">Россия</label>
          </div>
        </div>
        <ul>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_1" value="1"> 
              <label for="city_1">Москва</label>
            </div>
          </li>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_2" value="2"> 
              <label for="city_2">Санкт-Петербург</label>
            </div>
          </li>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_3" value="3"> 
              <label for="city_3">Великий Новгород</label>
            </div>
          </li>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_4" value="4"> 
              <label for="city_4">Оренбург</label>
            </div>
          </li>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_5" value="5"> 
              <label for="city_5">Екатеринбург</label>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="item">
    <ul>
      <li>
        <div class="country-name">
          <div class="checkbox">
            <input type="checkbox" name="country[]" checked="checked" id="country_2" value="UA">
            <label for="country_2">Украина</label>
          </div>
        </div>
        <ul>
          <li>
            <div class="checkbox">
              <input type="checkbox" name="city[]" id="city_6" value="6"> 
              <label for="city_6">Киев</label>
            </div>
          </li>
          <li>
            <div...

CSS

.box.country.active {
  visibility: visible;
}
.box.country .item {
  padding: 5px;
  border-bottom: 1px solid #ccd6e6;
  border-right: 1px solid #ccd6e6;
  display: flex;
  justify-content: space-between;
}
.box.country .item>ul {
  list-style-type: none;
  padding: 0;
}
.box.country .item>ul>li {
  color: #454545;
  font-weight: 500;
}
.box.country .item>ul .country-name {
  display: flex;
  align-content: center;
  align-items: center;
}
.box.country .item>ul>li ul {
  list-style-type: none;
  margin-top: 10px;
}
.box.country .item>ul>li ul li {
  margin-bottom: 10px;
  color: #454545;
  font-weight: 400;
}

JavaScript

console.clear();
$('div.box').on('change', ':checkbox', function(e) {
  var $checkbox = $(e.target),
      isCountry = $checkbox.closest('li').has('ul').length > 0,
      isChecked = $checkbox.prop('checked');
  if (isCountry) {
    var $cities = $checkbox.closest('li').find('ul :checkbox'),
    		hasChecked = $cities.filter(':checked').length > 0;
    if(!isChecked && !hasChecked){
      $checkbox.prop('checked', true);
      return;
    }
    $.each($cities, function(idx, itm){
    	itm.checked = false;
    });
  }
  else {
    $checkbox.closest('ul').closest('li').find('.country-name :checkbox').prop('checked', false);
  }
});