javascript - 单击复选框后如何获取 src 属性值？

Question

我有一个复选框，其顶部有图像替换。我想做的是单击复选框并获取图像的 src 属性值并将其放置在文本区域内。

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>
<textarea id='txtarea'></textarea>

jQuery

var tempValue = '';
$('.thumbnail :checkbox').change(function() {
    tempValue += $(this).nextAll("img").attr("src");
    $('textarea').html(tempValue);        
});

CSS

textarea{width:100%;height:200px;}
input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    background: #999;
    display: inline-block;
    padding: 0;
}

input[type=checkbox]:checked + label {
    border: 10px solid grey;
    padding: 0;
}

此刻我在textarea内得到undefined。

JsFiddle

http://jsfiddle.net/vWFQQ/33/

Answer 1

.nextAll()不起作用，因为它位于 <label> 内。您需要使用.next()和.find() :

tempValue += $(this).next("label").find("img").attr("src");

片段

$(document).ready(function() {
  var tempValue = '';
  $('.thumbnail :checkbox').change(function() {
    tempValue += $(this).next("label").find("img").attr("src");
    $('textarea').html(tempValue);
  });
});

textarea {
  width: 100%;
  height: 200px;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  background: #999;
  display: inline-block;
  padding: 0;
}

input[type=checkbox]:checked + label {
  border: 10px solid grey;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<textarea id='txtarea'></textarea>