Как привязать активный чекбокс и блок внутри которого он находится?
Вот живой пример как сейчас у меня устроено
Сейчас я вывожу в одном блоке количество выбранных элементов, в другом label выбранных элементов по порядку, не сортируя. Код:
Выбрано: 2 Код:
Выбрано: 2 1) "единицы измерения" и "килограммы" "тонны" 2) "Полярность" и "обратная" "прямая". Нужно чтобы в блок "единицы измерения" попадали только "килограммы" и "тонны", а в блок "полярность" попадали только "обратная" и "прямая" А пустой блок (например если чекбоксы в "Полярность" не активные) не отображался вообще. Эти названия ("Единицы измерения", "Полярность") строятся динамически. Их может быть больше, они могут быть другие. Я получаю эти значения(Единица измерения, Полярность), перебираю их, но как связать активные чекбоксы и название для блока с чекбоксами не знаю. Вот пример на jsfiddle Понимаю что при изменении значения чекбокса можно проверять каждый элемент .ctf--b-filt-c-item: и если есть выбранные чекбоксы, то брать текст из элемента .ctf--b-filt-c-head и после него через запятую выводите все лейблы выбранных чекбоксов. Но не пойму как составить условие, или например как взять текст из элемента только того .ctf--b-filt-c-head который выбран Заранее спасибо |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active"> <div class="ctf--b-filt-c-head"><span class="b-txt">Единица измерения:</span></div> <div class="ctf--b-filt-c-body" style="display: block;"> <div class="ctf--b-wpr-scr"> <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double"> <li> <input type="checkbox" id="idchkk_2_0_0" value="11770"> <label for="idchkk_2_0_0"> <i></i> Килограмм </label> </li> <li> <input type="checkbox" id="idchkk_2_0_1" value="11771"> <label for="idchkk_2_0_1"> <i></i> Тонна </label> </li> </ul> <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--double"> </ul> </div> </div> </div> <div class="ctf--b-filt-c-item open ctf--b-filt-c-item--active"> <div class="ctf--b-filt-c-head"><span class="b-txt">Полярность:</span></div> <div class="ctf--b-filt-c-body" style="display: block;"> <div class="ctf--b-wpr-scr"> <ul class="ctf--b-filt-check-list "> <li> <input type="checkbox" id="idchkk_2_2_0" value="11773"> <label for="idchkk_2_2_0"> <i></i> Обратная </label> </li> <li> <input type="checkbox" id="idchkk_2_2_1" value="11776"> <label for="idchkk_2_2_1"> <i></i> Прямая </label> </li> </ul> </div> </div> </div> </div> <div id="count"></div> <div id="unit"></div> <script> var items = $('.ctf--b-filt-c-item'); $('.ctf--b-filt-check-list :checkbox').on('change', function() { var checked, count = 0, labelText, headerText, resultText = ''; items.each(function (i, el) { headerText = $(el).find('.ctf--b-filt-c-head span').text(); checked = $(el).find('.ctf--b-filt-check-list :checkbox').filter(':checked'); count += checked.length; labelText = checked.map(function(idx, elm) { return $(el).find('label').filter('[for="' + elm.id + '"]').text(); }).get().join(','); if(labelText.length > 0) resultText += headerText + labelText + '<br>'; }); $('#count').html('Выбрано: ' + count); $('#unit').html(resultText ); }); </script>> |
Часовой пояс GMT +3, время: 20:32. |