チェックボックスを使用してテキストエリアにhtmlマークアップを追加するには？

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

だけ小さな変更これでこれを動作させるでしょう。あなたはtextarea値に何かを行う前にurlの長さをチェックする必要があります

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

フィドル：http://jsfiddle.net/u9myz270/