Как привязать активный чекбокс и блок внутри которого он находится?

evans

Сейчас я вывожу в одном блоке количество выбранных элементов, в другом label выбранных элементов по порядку, не сортируя.

Выбрано: 2
Названия: Тонна , Прямая

Нужно чтобы сортировалась, примерно в таком виде:

Выбрано: 2
Единица измерения: Тонна
Полярность: Прямая

т.е. есть два блока - 1) "единицы измерения" и "килограммы" "тонны" 2) "Полярность" и "обратная" "прямая". Нужно чтобы в блок "единицы измерения" попадали только "килограммы" и "тонны", а в блок "полярность" попадали только "обратная" и "прямая"

А пустой блок (например если чекбоксы в "Полярность" не активные) не отображался вообще.

Эти названия ("Единицы измерения", "Полярность") строятся динамически. Их может быть больше, они могут быть другие.

Я получаю эти значения(Единица измерения, Полярность), перебираю их, но как связать активные чекбоксы и название для блока с чекбоксами не знаю. Вот пример на jsfiddle

Понимаю что при изменении значения чекбокса можно проверять каждый элемент .ctf--b-filt-c-item: и если есть выбранные чекбоксы, то брать текст из элемента .ctf--b-filt-c-head и после него через запятую выводите все лейблы выбранных чекбоксов. Но не пойму как составить условие, или например как взять текст из элемента только того .ctf--b-filt-c-head который выбран

var label = $('.ctf--b-filt-check-list label'), checkbox = $('.ctf--b-filt-check-list :checkbox').on('change', function() { var checked = checkbox.filter(':checked'); $('#count').html('Выбрано: ' + checked.length); var labelText = checked.map(function(i, el) { return label.filter('[for="' + el.id + '"]').text(); }).get().join(','); $('#unit').html('Названия: ' + labelText); });
<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--******"> <li> <label for="idchkk_2_0_0"> Килограмм </label> </li> <li> <label for="idchkk_2_0_1"> Тонна </label> </li> </ul> <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--******"> </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> <label for="idchkk_2_2_0"> Обратная </label> </li> <li> <label for="idchkk_2_2_1"> Прямая </label> </li> </ul> </div> </div>
</div>
1 ответ

evans

Изменение кода заключается в применении селектора для групп, и фильтрации дочерних элементов для каждой найденной группы

var unit = $('.ctf--b-filt-c-head span').text().split(':');
checkbox = $('.ctf--b-filt-check-list :checkbox').on('change', function() {	$('#unit').html('');	var checked = checkbox.filter(':checked');	$('#count').html('Выбрано: ' + checked.length);	var blocks = $('.ctf--b-filt-c-item');	$.each(blocks,function(block_number,block_content) {	var labelText = checked.map(function(i, el) {	return $(block_content).find('.ctf--b-filt-check-list label').filter('[for="' + el.id + '"]').text();	}).get().join(',').trim();	var response = labelText;	if ((response)&&(response!==',')) {	$('#unit').append( $(block_content).find('.ctf--b-filt-c-head span').text() + response);	$('#unit').append('');	} });
});
<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--******"> <li> <label for="idchkk_2_0_0"> Килограмм </label> </li> <li> <label for="idchkk_2_0_1"> Тонна </label> </li> </ul> <ul class="ctf--b-filt-check-list ctf--b-filt-check-list--******"> </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> <label for="idchkk_2_2_0"> Обратная </label> </li> <li> <label for="idchkk_2_2_1"> Прямая </label> </li> </ul> </div> </div>
</div>

licensed under cc by-sa 3.0 with attribution.