javascript - 动态构建列表(取决于复选框)

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(){
	$('.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>