jquery - 在jquery中获取选中复选框的值和图像
问题描述
我想在选中复选框时设置值和图像,例如在选中一个框时设置一个图像,在选中第二个框时设置第二个图像,依此类推。我正在使用 jquery 的淡入淡出效果。但是我在选中复选框时没有得到相应的图像。请帮帮我。
$(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>
. 最好引用一个包裹在每个<img>
like周围的标签<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>
推荐阅读
- asp.net - 如何在 asp.net GridView 的单个文本框中显示 3 个字段
- unity3d - 启用 Vuforia 时 Unity 崩溃
- r - 根据条件删除列
- angular - mat-list 的 formControlName 给出 'mat-form-field 必须包含 MatFormFieldControl'
- selenium-webdriver - 如何在写入 Excel 时阻止 POI 附加数据
- sql - 用于数据更新的 SQL 查询
- java - 使用 java.swing 呈现圆形按钮时出现问题。为什么这段代码不起作用?
- laravel - 未找到列:1054 个未知的列国家
- reactjs - 如何将 ref 附加到 fullcalendar-react 中的事件?
- javascript - 通过 JavaScript 计算表格内的数量和更新