我想在选中复选框时设置值和图像，例如在选中一个框时设置一张图像，在选中第二个框时设置第二张图像，依此类推。我正在使用 jquery 的 fadeIn 效果。但我没有在选中复选框时获得相应的图像。请帮帮我。
$(document).ready(function() {
$("[name=coffee]").click(function() {
myFunction();
});
function myFunction() {
var total = "<ul>";
$("[name=coffee]:checked").each(function() {
total += "<li>" + $(this).val() + "</li>";
$(this + '.imagename1').fadeIn(2000);
});
total += "</ul>";
alert(total);
$("#demo").html(total);
}
});.imagename1,
.imagename2,
.imagename3 {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" value="100">With cream<br>
<input type="checkbox" name="coffee" value="150">With sugar<br>
<input type="checkbox" name="coffee" value="200">With milk<br>
<input type="checkbox" name="coffee" value="250">With tea<br>
<br>
<input type="text" id="order" size="50">
<input type="submit" value="Submit">
</form>
<div class="imagename1">
<img id="myimage0" class="" src="images/images1/sofa1.jpg">
<h4 id="head0" class="">Two color sofa</h4>
</div>
<div class="imagename2">
<img id="myimage0" class="" src="images/images2/bed1.jpg">
<h4 id="head0" class="">Brown color bed</h4>
</div>
<div class="imagename3">
<img id="myimage0" class="" src="images/images3/kitchen1.jpg">
<h4 id="head0" class="">Dark black pannels style</h4>
</div>最佳答案
使用索引号来确定位置:
分配
<img>的 jQuery 集合。最好引用每个<img>周围的标签。喜欢<figure>var pix = $('.gallery .pic');.each()方法回调函数第一个参数是index$('.coffee').each(function(index) {...使用
.eq()指定哪个.pic的方法已揭晓pix.eq(index).fadeIn()
顺便说一句，永远不要多次使用#id，这是非常无效的。
演示
$("form").on('change', 'input', orderCoffee);
function orderCoffee(e) {
var sub = $('.inputs .sub');
var sum = $('.total');
var pix = $('.gallery .pic');
var bal = 0;
var per = Number($('.quantity').data('base'));
var qty = Number($('.quantity').val());
sub.eq(0).val('$' + (per * qty).toFixed(2));
$('.coffee').each(function(index) {
var prc = Number($(this).val());
if ($(this).is(':checked')) {
sub.eq(index + 1).text('$' + (prc * qty).toFixed(2));
pix.eq(index).fadeIn();
bal += prc * qty;
} else {
sub.eq(index + 1).text('');
pix.eq(index).fadeOut();
}
});
bal += per * qty;
sum.val('$' + bal.toFixed(2));
};:root,
body {
font: 400 3vw/6vh Arial
}
input {
font: inherit
}
.gallery {
display: flex
}
.pic {
display: none;
margin: 3px
}
figcaption {
text-align: center;
width: 120px
}
img {
display: block;
width: 120px
}
.quantity {
width: 6ch
}
.sub,
label {
display: inline-block;
}
label {
width: 30%
}
.total {
border-top: 3px solid #000;
margin-top: 3px;
}
.sub,
.total {
font-family: Consolas
}<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<form>
<fieldset class='inputs'>
<legend>How would you like your coffee?</legend>
<label>Quantity: <input name='quantity' class='quantity' type='number' min='1' max='99' value='1' data-base='5.50'> </label><output class='sub'></output><br>
<label><input type="checkbox" name="coffee" class='coffee' value=".25"> Cream </label><output class='sub'></output><br>
<label><input type="checkbox" name="coffee" class='coffee' value=".15"> Sugar </label><output class='sub'></output><br>
<label><input type="checkbox" name="coffee" class='coffee' value="1"> Milk </label><output class='sub'></output><br>
<label><input type="checkbox" name="coffee" class='coffee' value="1.25"> Tea </label><output class='sub'></output><br>
<label> Total </label><output class='total'></output>
</fieldset>
<hr>
<section class='gallery'>
<figure class='pic'>
<img src="https://images.pexels.com/photos/414720/pexels-photo-414720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<figcaption>Cup of Coffee</figcaption>
</figure>
<figure class='pic'>
<img src="https://cdn.cnn.com/cnnnext/dam/assets/150929101049-black-coffee-stock-super-tease.jpg">
<figcaption>Another Cup of Coffee</figcaption>
</figure>
<figure class='pic'>
<img src="https://nb.bbend.net/media/news/2019/11/13/1029120/main/Coffee.png">
<figcaption>Yet Another Cup of Coffee</figcaption>
</figure>
<figure class='pic'>
<img src="https://i.insider.com/5d9357d42e22af5a784d5e96?width=1100&format=jpeg&auto=webp">
<figcaption>Surprise! It's a Velociraptor!</figcaption>
</figure>
</section>
<hr>
<input class="order" name='order' type="text" size="50" value='WTH is this for?'>
<input type="submit" value='Order'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>关于jquery - 在jquery中获取选中复选框的值和图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59907933/