如何在jQuery中選中複選框時將項目添加到列表中？

Question

我有一個複選框的列表，我希望當它被選中時，複選框的標籤或值將被添加到列表中。

下面的小提琴，當複選框被選中/取消選中時，它會將「on」添加到列表中。

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

要追加$('ul').append('<li id="item-' + this.id + '">' +cbVal+'</li>');

Answer 3

嘗試時能夠從ul添加ID來刪除它li這樣的：

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