如何通过复选框将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

仅需很小的更改即可使其工作。 在对textarea值进行任何操作之前，您应检查url的长度：

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

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