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

520

21 июля 2017, 01:23

Сейчас я вывожу в одном блоке количество выбранных элементов, в другом 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); 
 });

<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 id="count"></div> 
<div id="unit"></div>