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;
}

我在undefined内获得textarea。

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

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

1 个答案: