复选框总价更新
checkbox total price update
我已经在这个问题上痛苦了，我需要复选框，如果点击增加"总"价格与所选项目的数量，像这样:未选中:demo = selectedQty * price，Total = demo + selectedQty * 1
<?php include include 'includes/head.php';
$dt = new DateTime("now", new DateTimeZone('Europe/Bucharest'));
$time_s = $dt->format('Y/m/d, H:i:s');
?>
<?php include 'includes/template_header.php';
if(isset($_GET['success']) && empty($_GET['success'])) {
echo 'your order has been placed';
} else {
if (empty($_POST) === false && empty($errors) === true) {
$place_order = array(
'time_s' => $_POST['time_s'],
'user_id' => $_POST['user_id'],
'img_no' => $_POST['img_no'],
'ref_no' => $_POST['ref_no'],
'sha_no' => $_POST['sha_no'],
'lar_no' => $_POST['lar_no'],
'first_name' => $_POST['first_name'],
'last_name' => $_POST['last_name'],
'email' => $_POST['email'],
'phone' => $_POST['phone'],
'website' => $_POST['website'],
'company' => $_POST['company'],
'message' => $_POST['message']);
place_order($place_order);
die("<script>location.href = 'preturi.php?success'</script>");
exit();
} else if (empty($errors) === false) {
echo output_errors($errors);
}?>
<div id="calculator" style="margin:5%">
<input id="slider" type="range" min="0" max="1000" value="0" step="1" style="width:100%;" />
<br />
<input type="number" id="sliderval" /><br />
<p id="total" style="display:inline-block">0</p></div>
<input type="checkbox" class="addon" value="1" />
<?php if (logged_in() === true){ ?>
<div style="margin:5%">
<form action="" method="post" name="comanda">
<p>
<input name="time_s" type="text" value="<?php echo $time_s;?>" style="display:none"/></p>
<p>
<input name="user_id" type="text" value="<?php echo $user_data['user_id'];?>" style="display:none"/></p>
<p>
<input name="last_name" type="text" value="<?php echo $user_data['last_name'];?>" style="display:none"/></p>
<p>
<input name="first_name" type="text" value="<?php echo $user_data['first_name'];?>" style="display:none"/></p>
<p>
<input name="email" type="text" value="<?php echo $user_data['email'];?>" style="display:none"/></p>
<p>Telefon:<br />
<input name="phone" type="text" /></p>
<p>Website:<br />
<input name="website" type="text" /></p>
<p>Companie:<br />
<input name="company" type="text" /></p>
<p>
<input name="img_no" type="number" id="sliderval1" style="display:none"/></p>
<p>Mesaj:<br />
<textarea name="message"></textarea></p>
<p><input type="submit" value="Trimite" />
<input name="reset" type="reset" value="Reset" /></p>
</form></div>
<script>
$('#sliderval').on('input', function() {
var selectedQty = $('#sliderval').val();
$('#slider').val(selectedQty);
$('#sliderStatus').text(selectedQty);
calc(selectedQty);
});
$('#sliderval').on('input', function() {
var selectedQty = $('#sliderval').val();
$('#sliderval1').val(selectedQty);
$('#sliderStatus').text(selectedQty);
calc(selectedQty);
});
$('#sliderval1').on('input', function() {
var selectedQty = $('#sliderval1').val();
$('#slider').val(selectedQty);
$('#sliderStatus').text(selectedQty);
calc(selectedQty);
});
$('#sliderval1').on('input', function() {
var selectedQty = $('#sliderval1').val();
$('#sliderval').val(selectedQty);
$('#sliderStatus').text(selectedQty);
calc(selectedQty);
});
$("#slider").on('change',function() {
var selectedQty = $(this).val();
$('#sliderStatus').text(selectedQty);
$('#sliderval').val(selectedQty);
calc(selectedQty);
});
$("#slider").on('change',function() {
var selectedQty = $(this).val();
$('#sliderStatus').text(selectedQty);
$('#sliderval1').val(selectedQty);
calc(selectedQty);
});
function calc(selectedQty) {
var itemTotal = 0;
switch (true) {
case (selectedQty <= 2) :
itemTotal = 6.5 * selectedQty;
break;
case (selectedQty <= 5) :
itemTotal = 5.9 * selectedQty;
break;
case (selectedQty <= 15) :
itemTotal = 5.5 * selectedQty;
break;
case (selectedQty <= 30) :
itemTotal = 5 * selectedQty;
break;
case (selectedQty <= 60) :
itemTotal = 4.5 * selectedQty;
break;
case (selectedQty <= 100) :
itemTotal = 4 * selectedQty;
break;
case (selectedQty <= 200) :
itemTotal = 3.6 * selectedQty;
break;
case (selectedQty <= 500) :
itemTotal = 3.4 * selectedQty;
break;
default:
itemTotal = 3.2 * selectedQty;
break;
}
$('#demo').text(itemTotal);
}
<? }else{ echo '<div style="margin:5%">Pentru a plasa comanda trebuie sa inregistrat si autentificat.</div>';}?>
</script>
<?php } include 'includes/template_footer.php';?>
重要的事情先说:
<? }else{ echo '<div style="margin:5%">Pentru a plasa comanda trebuie sa inregistrat si autentificat.</div>';}?>
</script>
echo是无效的Javascript。这是行不通的。您需要从</script>结束标记中获取回显。
现在来回答你问题的前端部分。
给你。我给复选框添加了一个id，然后改变了所需的元素，不仅当你移动复选框时选中它，而且当你移动滑块然后单击复选框时。
见小提琴
请注意，不勾选时将总数输入demo，勾选时将总数输入total。