Question

我有以下问题：

我有几个复选框（目前是11），我现在要做的是动态“构建”一个列表，具体取决于复选框的值，所以有这样的：

用户来了，勾选一个复选框并出现一个li，当他勾选下一个li时，下一个li出现，当他勾选下一个li时，<ul>出现等等（当他取消其中一个时，<input type="checkbox" name="check_phone" id="check_phone"/> <label for="check_phone"><span></span>Phone Number</label>应该再次消失）。我很确定这可以和JS一起使用，但我不知道如何实现它我所拥有的是display:none以及用

定义的所有复选框

display:block

（每个复选框都有个人姓名）
我认为最大的问题是动态创建列表点，但我真的希望有人知道如何做到这一点。

我已经考虑过的是我的列表中只有11个列表点，所有列表都设置为{{1}}，然后在选中复选框时将它们设置为{{1}}，但这可能无法正常工作因为我在这之后使用插件来获取列表，并且有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>

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();
            }
     });

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

3 个答案: