动态构建列表（取决于复选框）

Question

我有以下问题：

我有几个复选框（目前是 11 个），我现在想做的是 "building" 动态列表，这取决于复选框的值，所以有这样的东西：

一个用户来了，勾选了一个复选框，一个 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

$("[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 2

我想这样就可以了。您只需将列表项的名称设置为与其对应的复选框名称相同即可。

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

Answer 3

这是一个非常快速的演示，每次更改复选框时都会创建所有选中的列表项。

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

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

 });
});

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

动态构建列表（取决于复选框）

Building a list dynamically (depending on checkboxes)

javascript

checkbox

jquery

html-lists

dynamically-generated