Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2017, 12:36
Новичок на форуме
Отправить личное сообщение для andreyChumak Посмотреть профиль Найти все сообщения от andreyChumak
 
Регистрация: 20.07.2017
Сообщений: 1

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

Сейчас я вывожу в одном блоке количество выбранных элементов, в другом label выбранных элементов по порядку, не сортируя.
Код:
Выбрано: 2
Названия: Тонна , Прямая
Нужно чтобы сортировалась, примерно в таком виде:
Код:
Выбрано: 2
Единица измерения: Тонна 
Полярность: Прямая
т.е. есть два блока -
1) "единицы измерения" и "килограммы" "тонны"
2) "Полярность" и "обратная" "прямая".
Нужно чтобы в блок "единицы измерения" попадали только "килограммы" и "тонны", а в блок "полярность" попадали только "обратная" и "прямая"

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

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

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

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

Заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2017, 17:11
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<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>
>

Последний раз редактировалось Dilettante_Pro, 20.07.2017 в 17:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 13:36
Блок как на Цетис Axios Элементы интерфейса 6 16.03.2011 23:36
Как убрать зацикливание плавающого блок на jqyery. Yatsenco Общие вопросы Javascript 1 07.11.2010 14:23
Как добраться до объекта внутри div#? Randomizer jQuery 8 24.09.2010 12:01
Навигация внутри DOM. Как это сделать нормально? master_alf Events/DOM/Window 10 09.04.2010 10:18