Построение списка динамически (в зависимости от флажков)

Question

У меня следующий вопрос:

У меня есть несколько флажков (на данный момент 11) и то, что я хочу сделать сейчас «здание» список динамически, в зависимости от значения флажков, поэтому иметь что-то вроде этого:

пользователь приходит, помечает флажок и один li появляется, когда он помечает следующий, следующий li появляется, когда он помечает следующий, снова появляется один li (когда он удаляет один из них, li должен снова исчезнуть). Я вполне уверен, что это может работать с JS, но я понятия не имею, как это реализовать.
Что у меня есть, <ul> и все галочки определены с

<input type="checkbox" name="check_phone" id="check_phone"/> 
<label for="check_phone"><span></span>Phone Number</label> 

(Каждый флажок имеет это индивидуальное имя)
То, что я думаю, что это будет самой большой проблемой является создание списка-точек динамически, но Я действительно надеюсь, что кто-то знает, как это сделать.

Что я уже думал о том, что в моем списке всего 11 списков, все установлены в display:none, а затем просто устанавливают их на display:block, когда установлен флажок, но это будет возможно не работать, потому что я использую плагин чтобы прибегнуть к списку после этого и имея 11 списков, но только 2 видимых или что-то подобное не будет работать.

Спасибо за помощь!

Answer 1

Вот очень быстрая демонстрация, при каждом изменении флажка она создает все элементы списка.

$(document).ready(function(){ 
 
\t $('.item').on('change', function() { 
 
\t \t var $list = $('ul#checked').empty(); 
 

 
\t \t $('.item:checked').each(function(index, item) { 
 
\t \t \t var itemName = $(item).prop('name'); 
 
      var text = $('label[for='+itemName+']').text() 
 
\t \t \t $('<li></li>') 
 
\t \t \t \t .text(text) 
 
\t \t \t \t .appendTo($list) 
 
\t \t \t ; 
 
\t \t }) 
 

 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="item" name="check_phone" id="check_phone"/> 
 
<label for="check_phone"><span></span>Phone Number</label> 
 
<ul id="checked"> 
 
</ul>

Answer 2

$("[name^='check_']").click(function(){ 
 
    $("li."+ this.name).toggle(this.checked); 
 
});

#check_list li{ display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<label><input type="checkbox" name="check_phone"/>Phone Number</label> 
 
<label><input type="checkbox" name="check_mobile"/>Mobile Number</label> 
 

 
<ul id="check_list"> 
 
    <li class="check_phone">PHONE LI</li> 
 
    <li class="check_mobile">MOBILE LI</li> 
 
</ul>

Answer 3

Я думаю, что это будет делать. Вам просто нужно указать имена элементов списка так же, как и их соответствующие флажки.

$("input:checkbox").click(function() { 
      var current = $(this), 
        linkedListCorrespondingElement = $('#list-id > li[' + current.attr('name') + ']'); 
      if (current.is(":checked")) { 
       linkedListCorrespondingElement.show(); 
      } else { 
       linkedListCorrespondingElement.hide(); 
      } 
    });