我搜索了很多，但找不到任何解决方案
我有这个代码
$('input[type="checkbox"]').change(function() {
var totalprice = 0;
var ekhizmat = 0;
var guven = 0;
var aracprice = parseInt(<?php echo $_POST["aracprice"];?>);
$('input[type="checkbox"]:checked').each(function() {
totalprice = totalprice + ekhizmat + guven +parseInt($(this).val(), 10) + aracprice;
});
$('#total').text(totalprice);
});
我想如果我检查，然后给我这个：
$('#total').text(totalprice);
如果我取消选中，那么给我这个：
totalprice = totalprice + aracprice ;
$('#total').text(totalprice);
代码 ：
$('input[type="checkbox"]').change(function() {
var totalprice = 0;
var ekhizmat = 0;
var guven = 0;
var aracprice = parseInt(<?php echo $_POST["aracprice"];?>);
$('input[type="checkbox"]:checked').each(function() {
totalprice = totalprice + ekhizmat + guven + parseInt($(this).val(), 10) + aracprice;
});
$('#total').text(totalprice);
});
$('.cb-ek').change(function() {
var ekhizmat = 0;
$('.cb-ek:checked').each(function() {
ekhizmat = ekhizmat + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#ekhizmat').text(ekhizmat);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
$('.cb-guven').change(function() {
var guven = 0;
$('.cb-guven:checked').each(function() {
guven = guven + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#guven').text(guven);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="ar">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.0.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<link rel="stylesheet" href="../public/main.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css"> ...
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
<body>
<style>
.card {
width: 263px;
margin-right: -15px;
float: right;
text-align: center;
direction: rtl;
padding: 15px;
border-radius: 0;
}
.img-full {
width: 46%;
transform: translateX(58%) translateY(0%);
}
.title-ek {
font-size: 20px;
margin-bottom: 18px;
background: blanchedalmond;
padding: 10px;
background: #1e5799;
background: #861c3b;
background: -moz-linear-gradient(left, #861c3b 0%, #38145b 100%);
background: -webkit-linear-gradient(left, #861c3b 0%, #38145b 100%);
background: linear-gradient(to right, #861c3b 0%, #38145b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#861c3b', endColorstr='#38145b', GradientType=1);
color: #fff;
font-weight: bold;
}
.price-left {
text-align: left;
direction: ltr;
font-weight: bold;
line-height: 28px;
}
.cb-ek {
bottom: 21px;
position: absolute;
right: 20px;
}
.head-tile-ek {
margin-right: -17px;
margin-top: 30px;
margin-bottom: 30px;
font-size: 23px;
font-weight: 700;
color: #382e82;
}
#baby {
position: absolute;
bottom: 42px;
right: 19px;
color: #861c3b;
}
.section-basket {
z-index: 110;
position: fixed;
bottom: 0;
width: 100%;
}
.section-basket .container {
background-color: #FDECCD;
color: #333;
padding: 20px;
background-color: #861c3bf5;
color: #FFF;
max-width: 930px;
border-radius: 10px 10px 0 0;
text-align: center;
}
.section-basket .info {
display: inline-block;
font-size: 16px;
padding-right: 8px;
}
.section-basket .total {
display: inline-block;
font-size: 20x;
}
.section-basket .total .btn {
margin-right: 20px;
}
section-basket .container span {
color: #333;
font-size: 100%;
}
sub {
bottom: -0.25em;
}
.btn-primary {
color: #ffffff;
background-color: #2780e3;
border-color: #2780e3;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 10px 18px;
font-size: 15px;
line-height: 1.42857143;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-primary {
color: #ffffff;
background-color: transparent;
;
border-color: #ffffff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: transparent;
border-color: #ffffff;
}
.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: #ffffff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #38145b;
border-color: #ffffff;
}
.space {
margin-right: 10px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="head-tile-ek">الخدمات الإضافية</h2>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق إضافي</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">100 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="100">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">GPS</h3>
<img src="../public/icons/navigator.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">200 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="200">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">مقعد طفل</h3>
<img src="../public/icons/child.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">300 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="300">
<a href="#" data-title="Title" data-content="Contents..." data-placement="right"><i id="baby" class="fas fa-question-circle"></i></a>
<script>
$('#baby').webuiPopover({
content: 'مناسب للأطفال ذوي الوزن من 9 كيلو إلى 36 كيلو',
placement: 'top',
animation: 'pop'
});
</script>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">400 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="400">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="head-tile-ek">خدمات التأمين</h2>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">أضرار خفيفة</h3>
<img src="../public/icons/car-insurance.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">500 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="500">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">أضرار ثقيلة</h3>
<img src="../public/icons/accident.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">600 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="600">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">مقعد طفل</h3>
<img src="../public/icons/child.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">400 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="400">
<script>
</script>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق إضافي</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">200 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="200">
</div>
</div>
</div>
</div>
</div>
<script>
</script>
<div class="section-basket">
<div class="container ">
<div class="total">
<button type="submit" class="btn btn-primary submitButton"><i class="fa fa-chevron-left fa-fw"></i> المتابعة</button>
<span class="price"><span id="total"><?php echo $_POST['aracprice'];?></span> TL</span>
<span class="label" dir="rtl">المجموع: </span><span class="space"></span>
<i class="fas fa-equals"></i><span class="space"></span>
<span id="sigorta" class="price"><span id="guven">0</span> TL</span>
<span class="label" dir="rtl">التأمين: </span><span class="space"></span>
<i class="fa fa-plus fa-fw"></i><span class="space"></span>
<span class="price"><span id="ekhizmat">0</span> TL</span>
<span class="label" dir="rtl">خدمات إضافية: </span><span class="space"></span>
<i class="fa fa-plus fa-fw"></i><span class="space"></span>
<span id="arac" class="price"><span><?php echo $_POST['aracprice'];?></span> TL</span>
<span class="label" dir="rtl">المركبة: </span>
</div>
</div>
</div>
</body>
</html>只是我想制作 If 和 else，但我不能每个循环 提前致谢
试试下面：
$(document).on('change', 'input[type="checkbox"]', function() {
var totalprice = 0;
var ekhizmat = 0;
var guven = 0;
var aracprice = parseInt(<?php echo $_POST["aracprice"];?>);
if (this.checked) {
totalprice = totalprice + ekhizmat + guven +parseInt($(this).val(), 10) + aracprice;
}else{
totalprice = totalprice + aracprice ;
}
$('#total').text(totalprice);
}
<script>
$('input[type="checkbox"]').change(function() {
var totalprice = parseInt(<?php echo $_POST["aracprice"];?>);
var ekhizmat = 0;
var guven = 0;
$('input[type="checkbox"]:checked').each(function() {
totalprice = totalprice + +ekhizmat + guven + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#total').text(totalprice);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
$('.cb-ek').change(function() {
var ekhizmat = 0;
$('.cb-ek:checked').each(function() {
ekhizmat = ekhizmat + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#ekhizmat').text(ekhizmat);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
$('.cb-guven').change(function() {
var guven = 0;
$('.cb-guven:checked').each(function() {
guven = guven + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#guven').text(guven);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
</script>所有代码 ：
<!doctype html>
<html lang="ar">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.0.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<link rel="stylesheet" href="../public/main.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css"> ...
<script src="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js"></script>
<body>
<style>
.card {
width: 263px;
margin-right: -15px;
float: right;
text-align: center;
direction: rtl;
padding: 15px;
border-radius: 0;
}
.img-full {
width: 46%;
transform: translateX(58%) translateY(0%);
}
.title-ek {
font-size: 20px;
margin-bottom: 18px;
background: blanchedalmond;
padding: 10px;
background: #1e5799;
background: #861c3b;
background: -moz-linear-gradient(left, #861c3b 0%, #38145b 100%);
background: -webkit-linear-gradient(left, #861c3b 0%, #38145b 100%);
background: linear-gradient(to right, #861c3b 0%, #38145b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#861c3b', endColorstr='#38145b', GradientType=1);
color: #fff;
font-weight: bold;
}
.price-left {
text-align: left;
direction: ltr;
font-weight: bold;
line-height: 28px;
}
.cb-ek {
bottom: 21px;
position: absolute;
right: 20px;
}
.head-tile-ek {
margin-right: -17px;
margin-top: 30px;
margin-bottom: 30px;
font-size: 23px;
font-weight: 700;
color: #382e82;
}
#baby {
position: absolute;
bottom: 42px;
right: 19px;
color: #861c3b;
}
.section-basket {
z-index: 110;
position: fixed;
bottom: 0;
width: 100%;
}
.section-basket .container {
background-color: #FDECCD;
color: #333;
padding: 20px;
background-color: #861c3bf5;
color: #FFF;
max-width: 930px;
border-radius: 10px 10px 0 0;
text-align: center;
}
.section-basket .info {
display: inline-block;
font-size: 16px;
padding-right: 8px;
}
.section-basket .total {
display: inline-block;
font-size: 20x;
}
.section-basket .total .btn {
margin-right: 20px;
}
section-basket .container span {
color: #333;
font-size: 100%;
}
sub {
bottom: -0.25em;
}
.btn-primary {
color: #ffffff;
background-color: #2780e3;
border-color: #2780e3;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 10px 18px;
font-size: 15px;
line-height: 1.42857143;
border-radius: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-primary {
color: #ffffff;
background-color: transparent;
;
border-color: #ffffff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: transparent;
border-color: #ffffff;
}
.btn-primary:hover {
color: #fff;
background-color: transparent;
border-color: #ffffff;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #38145b;
border-color: #ffffff;
}
.space {
margin-right: 10px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="head-tile-ek">الخدمات الإضافية</h2>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق إضافي</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">100 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="100">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">GPS</h3>
<img src="../public/icons/navigator.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">200 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="200">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">مقعد طفل</h3>
<img src="../public/icons/child.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">300 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="300">
<a href="#" data-title="Title" data-content="Contents..." data-placement="right"><i id="baby" class="fas fa-question-circle"></i></a>
<script>
$('#baby').webuiPopover({
content: 'مناسب للأطفال ذوي الوزن من 9 كيلو إلى 36 كيلو',
placement: 'top',
animation: 'pop'
});
</script>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">400 TL</div>
<input type="checkbox" style="float:right" class="cb-ek" value="400">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="head-tile-ek">خدمات التأمين</h2>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">أضرار خفيفة</h3>
<img src="../public/icons/car-insurance.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">500 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="500">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">أضرار ثقيلة</h3>
<img src="../public/icons/accident.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">600 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="600">
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">مقعد طفل</h3>
<img src="../public/icons/child.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">400 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="400">
<script>
</script>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-block">
<h3 class="title-ek">سائق إضافي</h3>
<img src="../public/icons/chauffeur.svg" alt="" class="img-full" style="float:left">
<div class="clear" style="clear:both"></div>
<div class="price-left" style="float:left">200 TL</div>
<input type="checkbox" style="float:right" class="cb-guven" value="200">
</div>
</div>
</div>
</div>
</div>
<script>
$('input[type="checkbox"]').change(function() {
var totalprice = parseInt(<?php echo $_POST["aracprice"];?>);
var ekhizmat = 0;
var guven = 0;
$('input[type="checkbox"]:checked').each(function() {
totalprice = totalprice + +ekhizmat + guven + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#total').text(totalprice);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
$('.cb-ek').change(function() {
var ekhizmat = 0;
$('.cb-ek:checked').each(function() {
ekhizmat = ekhizmat + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#ekhizmat').text(ekhizmat);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
$('.cb-guven').change(function() {
var guven = 0;
$('.cb-guven:checked').each(function() {
guven = guven + parseInt($(this).val());
// ekhizmat = ekhizmat + parseInt($(this).val());
// guven = guven + parseInt($(this).val());
});
$('#guven').text(guven);
// $('#ekhizmat').text(ekhizmat);
// $('#guven').text(guven);
});
</script>
<div class="section-basket">
<div class="container ">
<div class="total">
<button type="submit" class="btn btn-primary submitButton"><i class="fa fa-chevron-left fa-fw"></i> المتابعة</button>
<span class="price"><span id="total"><?php echo $_POST['aracprice'];?></span> TL</span>
<span class="label" dir="rtl">المجموع: </span><span class="space"></span>
<i class="fas fa-equals"></i><span class="space"></span>
<span id="sigorta" class="price"><span id="guven">0</span> TL</span>
<span class="label" dir="rtl">التأمين: </span><span class="space"></span>
<i class="fa fa-plus fa-fw"></i><span class="space"></span>
<span class="price"><span id="ekhizmat">0</span> TL</span>
<span class="label" dir="rtl">خدمات إضافية: </span><span class="space"></span>
<i class="fa fa-plus fa-fw"></i><span class="space"></span>
<span id="arac" class="price"><span><?php echo $_POST['aracprice'];?></span> TL</span>
<span class="label" dir="rtl">المركبة: </span>
</div>
</div>
</div>
</body>
</html>