如何通過複選框將html標記添加到textarea？

Question

HTML

<div class="thumbnail"> 
    <input type="checkbox" name="thing_5" value="valuable" id="thing_5"> 
    <label for="thing_5"> 
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/U.S._Marines_in_Operation_Allen_Brook_(Vietnam_War)_001.jpg"> 
    </label> 
</div> 
<div class="thumbnail"> 
    <input type="checkbox" name="thing_5" value="valuable" id="thing_6"> 
    <label for="thing_6"> 
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/a/ac/U.S._Marines_in_Operation_Allen_Brook_(Vietnam_War)_001.jpg"> 
    </label> 
</div> 
<textarea id='txtarea'></textarea> 

JQuery的

$(document).ready(function() { 
    $('.thumbnail :checkbox').change(function() { 
    var urls = []; 
    $(":checkbox:checked").each(function() { 
     urls.push($(this).next("label").find("img").attr("src")); 
    }); 
    if (urls.length) 
     $("#txtarea").val("<li>" + urls.join("</li><li>") + "</li>"); 
    else 
     $("#txtarea").val(""); 
    }); 
}); 

我需要能夠前值增加<li>，也可以添加/移除複選框選中/取消

Answer 1

只有一個小的變化將使它在這方面起作用。

if (urls.length) 
    $("#txtarea").val("<li>" + urls.join("</li><li>") + "</li>"); 
else 
    $("#txtarea").val(""); 

小提琴：http://jsfiddle.net/u9myz270/

在 textarea值做任何事情之前，您應檢查 url的長度