Javascript-форум - Список чекбоксов по клику на главный чекбокс

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Список чекбоксов по клику на главный чекбокс (https://javascript.ru/forum/dom-window/61663-spisok-chekboksov-po-kliku-na-glavnyjj-chekboks.html)

Список чекбоксов по клику на главный чекбокс

Проблема в следующем. при нажатии на чекбокс, должны показываться остальные чекбоксы, усложняется тем, что id главного чекбокса динамичен. Просидел пол дня, переискал кучу решений, можно задать display-none главному элементу, но тогда не получается обратиться к остальным по ul. Ссылку прилагаю https://jsfiddle.net/Pimpleks/2u2frzjj/

Beactive,
чуть изменить label ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     .popular-category :checked ~ ul {
       display: block;
     }
     .popular-category  ul {
       display: none;
     }
  </style>
  </head>

<body>
<li id="vehicle_models-29" class="popular-category"><input value="29" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-29" class=""><label for="in-vehicle_models-29" class="selectit">Alfa Romeo</label><ul class="children" >

<li id="vehicle_models-173" class=""><label class="selectit"><input value="173" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-173" class=""> 145</label></li>

<li id="vehicle_models-174" class=""><label class="selectit"><input value="174" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-174" class=""> 146</label></li>

<li id="vehicle_models-175" class=""><label class="selectit"><input value="175" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-175" class=""> 147</label></li>

<li id="vehicle_models-176" class=""><label class="selectit"><input value="176" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-176" class=""> 155</label></li>

<li id="vehicle_models-177" class=""><label class="selectit"><input value="177" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-177" class=""> 156</label></li>

<li id="vehicle_models-178" class=""><label class="selectit"><input value="178" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-178" class=""> 159</label></li>

<li id="vehicle_models-179" class=""><label class="selectit"><input value="179" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-179" class=""> 164</label></li>

<li id="vehicle_models-180" class=""><label class="selectit"><input value="180" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-180" class=""> 166</label></li>

<li id="vehicle_models-181" class=""><label class="selectit"><input value="181" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-181" class=""> 33</label></li>

<li id="vehicle_models-182" class=""><label class="selectit"><input value="182" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-182" class=""> 75</label></li>

<li id="vehicle_models-183" class=""><label class="selectit"><input value="183" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-183" class=""> 90</label></li>

<li id="vehicle_models-184" class=""><label class="selectit"><input value="184" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-184" class=""> Alfasud</label></li>

<li id="vehicle_models-185" class=""><label class="selectit"><input value="185" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-185" class=""> Alfetta</label></li>

<li id="vehicle_models-186" class=""><label class="selectit"><input value="186" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-186" class=""> Arna</label></li>

<li id="vehicle_models-187" class=""><label class="selectit"><input value="187" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-187" class=""> Brera</label></li>

<li id="vehicle_models-188" class=""><label class="selectit"><input value="188" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-188" class=""> GT</label></li>

<li id="vehicle_models-189" class=""><label class="selectit"><input value="189" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-189" class=""> GTV</label></li>

<li id="vehicle_models-190" class=""><label class="selectit"><input value="190" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-190" class=""> Guilietta</label></li>

<li id="vehicle_models-191" class=""><label class="selectit"><input value="191" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-191" class=""> MiTo</label></li>

<li id="vehicle_models-192" class=""><label class="selectit"><input value="192" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-192" class=""> Montreal</label></li>

<li id="vehicle_models-193" class=""><label class="selectit"><input value="193" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-193" class=""> Spider</label></li>
</ul>
</li>
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 409625)

Beactive,
чуть изменить label ...

За счет чего срабатывает ? css? и что значит в css символ бесконечности при checked ?

Beactive,
+ следующий
~ где-то дальше
срабатывает потому что стало можно использовать состояние :checked инпута перед ul
https://webref.ru/css/selector/sibling

Да все работает, но класс class="popular-category" не во всех категориях - вывод - не все пункты свернуты. К чему можно привязать? Ну и туда же вопрос, если выделена главная категория, то запрет на отметку более одного чекбокса все равно через js реализовывать?

Вообщем сделал класс еще один для непопулярных и добавил в css такой же код, а вот вопрос с выбором главного и одного дополнительного чекбокса остается открытым.

Нашел вот такое код, но без html не могу понять к чему привязка

$(document).ready(function(){
$('#fixed').hide();
$('#tovar .ctrl_products_cmp').change(function(){
var checkbuttons = 0;
$('#tovar .ctrl_products_cmp').each(function(){
if ($(this).is(':checked')) {
checkbuttons++;
}
});
if (checkbuttons >= 2) {
$('#fixed').fadeIn('600');
} else {
$('#fixed').fadeOut('600');
}
});
});

Цитата:

Сообщение от Beactive

класс class="popular-category"

классы то кто формирует, не вы?

Цитата:

Сообщение от Beactive

К чему можно привязать?

ваша структура известна только вам

Цитата:

Сообщение от Beactive

запрет на отметку более одного чекбокса все равно через js реализовывать?

... ой ... а что type="radio" у вас под запретом
можно и на js если знать структуру, но если структура в ваших руках то js не нужен

Хочу сделать элементы неактивными, не срабатывает

var f = document.querySelector('input').value;
f.onchange = function() {
  var n = f.querySelectorAll('[type="checkbox"]'),
      l = f.querySelectorAll('[type="checkbox"]:checked');
  for(var j=0; j<n.length; j++)
    if (l.length >= 2) { 
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; 
    } else {
      n[j].disabled = false; 
    }
}

https://jsfiddle.net/Pimpleks/2u2frzjj/3/