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/

Цитата:

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

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

а можно узнать что делает код?

находит input, если чекбокс отмечен больше чем 2 раза, то остальные становятся неактивыми.

Я так понимаю, неправильно образаюсь к классу, или даже не к тому, вокруг элемента input есть label с классом, обращаюсь к нему, и тоже не работает, класс children окутывает их всех, но и с ним не работает.

var f = document.querySelectorAll('.selectit');
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 >= 1) { 
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; 
    } else {
      n[j].disabled = false; 
    }
}

Пример с children
https://jsfiddle.net/Pimpleks/2u2frzjj/4/

Как проверить где ошибка ?

var f = document.querySelectorAll('#vehicle_models-" + *');
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 >= 1) { 
      n[j].disabled = true; 
      for(var i=0; i<l.length; i++)
        l[i].disabled = false; 
    } else {
      n[j].disabled = false; 
    }
}

Beactive,
вам бы чётко сформулировать задачу и почему нельзя без скриптов то обойтись? пока, что вы там кошдеварите, одному вам известно.
как говорит RTFM локализуйте задачу, куча калиток, а вы куда-то в стену долбитесь.

Цитата:

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

Я не знаю как реализовать без jquery, да и на нем как тоже не выходит.
Есть главный селектор, если он выбран то показываются остальные, благодаря Вам это реализовано, далее из остальных нужно выбрать только одно. куда еще то локализовать.

https://jsfiddle.net/Pimpleks/x1e7t4tb/2/

Beactive,
var f = document.querySelectorAll возвращает массив, а вы работаете с f, как с простой переменной

Beactive,
так измените type="checkbox" на type="radio" и ненужен будет скрипт

Beactive,

<style type="text/css">
   .popular-category :checked ~ ul {
  display: block;
}

.popular-category ul {
  display: none;
}

  </style>
<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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" 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="radio" name="tax_input[vehicle_models][]" id="in-vehicle_models-193" class=""> Spider</label>
    </li>
  </ul>
</li>

Спасибо за совет по изменению на radio, я это понял, но нет возможности изменить код, это функция в движке WP и если изменить то изменится и в li. Поэтому пошел вторым путем - создать скрипт обработчик.

Цитата:

Сообщение от Dilettante_Pro (Сообщение 409669)

Beactive,
var f = document.querySelectorAll возвращает массив, а вы работаете с f, как с простой переменной

var f = document.forms.Form;

Возвращает массив ? обращается именно к этой форме. Каким способом обратиться именно к элементам формы? все они содержатся в ul class="children" .

Beactive,
на jquery можно?

Спасибо Вам всем, большого крепко здоровья. Хорошо когда говорите не загадками, а указывается именно где ошибка и ты сидишь пытаешься понять. Спасибо большое, я понял разницу массива и переменной. Сделал так.

var f = document.querySelector('ul.children');
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 >= 1) {
      n[j].disabled = true;
      for (var i = 0; i < l.length; i++)
        l[i].disabled = false;
    } else {
      n[j].disabled = false;
    }
}

и все заработало

Цитата:

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

Beactive,
на jquery можно?

Если подскажешь как по другому, или более качественно - прийму к сведенью.

Beactive,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 li > ul{
   display: none;
 }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
$(function() {
    $("ul").each(function(c, b) {
        var a = $(b).parent().find('[type="checkbox"]:first');
        a.on({
            click: function() {
                $(b).toggle(this.checked)
            }
        });
        a = $('[type="checkbox"]', b);
        a.on({
            click: function() {
                a.not(this).prop({
                    checked: !this.checked
                })
            }
        })
    })
});
  </script>
</head>

<body>
<li id="vehicle_models-29" class="popular-category"><label class="selectit"><input value="29" type="checkbox" name="tax_input[vehicle_models][]" id="in-vehicle_models-29" class=""> 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>