javascript - 如何通过复选框将 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("");

fiddle :http://jsfiddle.net/u9myz270/