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

Question

我有一个复选框，其上有一个图像替换。我想要做的是点击复选框并获取图像的src属性值并将其放置在textarea中。

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之内的3210。

的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>