Javascript 在jQuery中选中复选框时，如何将项目添加到列表中？

我有一个复选框列表，我希望当它被选中时，复选框的标签或值将被添加到一个列表中

下面的小提琴，当复选框被选中/取消选中时，它会将“on”添加到列表中

$（'.cb'）。单击（函数（）{
var cbVal=$（“输入[type='checkbox']”）val（）；
$（'ul'）。追加（'
'+cbVal+'
'））
});

单击后，您可以重复复选框，查看选中状态并更新列表

$('.cb').click(function() {
$('ul').html("");
$(".cb").each(function(){
    if($(this).is(":checked")){
         $('ul').append('<li>'+$(this).val()+'</li>')
    }
});
});

$（'.cb'）。单击（函数（）{
$（'ul'）.html（“”）；
$（“.cb”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
$（'ul'）.append（'
'+$（this.val（）+'
'））
}
});
});

---

以下是最新的报告

您可以在事件处理程序中使用

此

来检查选中的支票簿，也最好在此处使用

更改

事件

$('.cb').change(function() {
  var cbVal = this.checked ? 'on ' : 'off ';
  cbVal += $('[for='+this.id+']').text ();
  $('ul').append('<li>'+cbVal+'</li>');
});

$（'.cb'）.change（函数（）{
var cbVal=this.checked？'on'：'off'；
cbVal+=$（'[for='+this.id+']'））.text（）；
$（'ul'）。追加（'
'+cbVal+'
'）；
});

要能够从

ul

中删除

li

，请在追加

$（'ul'）.append（'li id=“item-'+this.id+'”>“+cbVal+”）时向其添加id
尝试以下操作：

$(document).ready(function () {
  $('.cb').click(function () {
    var  szId=$(this).attr('id');
    var cbVal = $('label[for=' + szId + ']').text();
    $('ul').append('<li>' + cbVal + '</li>')
  });
});

$（文档）.ready（函数（）{
$（'.cb'）。单击（函数（）{
var szId=$（this.attr（'id'）；
var cbVal=$（'label[for='+szId+']'）。text（）；
$（'ul'）。追加（'
'+cbVal+'
'））
});
});
我同意它非常有效，但如果有数百个这样的复选框，会发生什么呢。每次选中/取消选中复选框时，您都在重新创建列表。是否可以将其保存在本地存储中，以便在选中并重新加载时保存？
$(document).ready(function () {
  $('.cb').click(function () {
    var  szId=$(this).attr('id');
    var cbVal = $('label[for=' + szId + ']').text();
    $('ul').append('<li>' + cbVal + '</li>')
  });
});