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

Question

我有一个复选框列表，我希望在选中该复选框时，复选框的标签或值将添加到列表中。

下面的小提示，当选中/取消选中复选框时，它会添加＆＃39; on＆＃39;列表。

Here's a sample fiddle

$('.cb').click(function() {
  var cbVal = $("input[type='checkbox']").val();
  $('ul').append('<li>'+cbVal+'</li>')
});

Answer 1

单击“向上”，您可以迭代复选框，查看已选中状态并更新列表。

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

以下是更新后的fiddle。

Answer 2

您可以在事件处理程序中使用this来检查选中的支票簿，最好在此处使用change事件。

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

在追加li

时，能够从ul中删除$('ul').append('<li id="item-' + this.id + '">' +cbVal+'</li>'); {}}

Answer 3

试试这个：

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