Убрать checked с потомков input[type=checkbox]

348

28 мая 2021, 05:10

Как сделать так, чтоб при выборе страны снималось выделение со всех соответствующих городов и наоборот, при выборе города снималось выделение со страны, если оно установлено.

Пробовал так, но тогда, если отмечены города, мне не дает отметить страну и снять выделение с городов.

$('body').on('change','.box.country .item ul .country-name', function() {
  if ($(this).is(':checked')) {
    $(this)
      .closest(".box.country .item ul ul li")
      .find('input[type=checkbox]')
      .prop('checked', '');
  }
  if ($(".box.country .item ul ul li input[type=checkbox]").is(':checked')) {
    $(this)
      .closest(".box.country .item ul")
      .find('.country-name input[type=checkbox]')
      .prop('checked', '');
  }
});

.box.country.active { 
  max-height: 100vh; 
  visibility: visible; 
} 
.box.country .item { 
  max-width: 25%; 
  -webkit-flex-basis: 25%; 
  -ms-flex-preferred-size: 25%; 
  flex-basis: 25%; 
  padding: 5px; 
  border-bottom: 1px solid #ccd6e6; 
  border-right: 1px solid #ccd6e6; 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-align-content: center; 
  -ms-flex-line-pack: center; 
  align-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  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: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-align-content: center; 
  -ms-flex-line-pack: center; 
  align-content: center; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: 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; 
}

<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 class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_7" value="7">  
              <label for="city_7">Харьков</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_8" value="8">  
              <label for="city_8">Одесса</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_3" value="BY"> 
            <label for="country_3">Белоруссия</label> 
          </div> 
        </div> 
        <ul> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_9" value="9">  
              <label for="city_9">Минск</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_10" value="10">  
              <label for="city_10">Гомель</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_11" value="11">  
              <label for="city_11">Гродно</label> 
            </div> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</div>

Answer 1

Но я бы всё таки использовал какую-то привязку к классам и data-атрибутам.

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

.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; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<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 class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_7" value="7">  
              <label for="city_7">Харьков</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_8" value="8">  
              <label for="city_8">Одесса</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_3" value="BY"> 
            <label for="country_3">Белоруссия</label> 
          </div> 
        </div> 
        <ul> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_9" value="9">  
              <label for="city_9">Минск</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_10" value="10">  
              <label for="city_10">Гомель</label> 
            </div> 
          </li> 
          <li> 
            <div class="checkbox"> 
              <input type="checkbox" name="city[]" id="city_11" value="11">  
              <label for="city_11">Гродно</label> 
            </div> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сверстать круговую диаграмму с фоновым изображением?

Внимание! Это дубль вопроса с тостера! Автор не я, просто вопрос показался интересным:

HTML

Вставка даты по умолчанию на HTML странице

Для выгрузки операций из БД на html-странице есть 2 окна для ввода периода времени "с" и "по"Если написать в коде страницы: body onload = "ShowMonthDate();", то при...

145

HTML

Сетка товаров на Grid

У меня есть сетка товаров сделанная на гридахКоличество товаров в ряду - 4, рядов может неопределенное количество

106

Программно вставить символ в PasswordBox в позицию каретки

Дорого времени суток! Я пишу WPF контрол экранной клавиатурыУ нее должен быть режим пароля

104