hye，我计划创建一个表单，用户选中复选框并输入值，总数将自动计算。
我使用的是jquery，laravel 7。我注意到总额没有出现在。。下面是jquery
//calculation
//calculation
var total = 0,
values = [];
$('input[type=checkbox], input[type=number]').each(function() {
$(this).change(function () {
if( $ (this).is(':checked') && $ (this).val().length != 0) {
values.push($(this).val().attr('quantitys'));
total += parseFloat($(this).val()) * parseFloat(attr('quantitys'));
}
});
});
$("#total").text(total);
下面是html
@foreach ($services as $s)
<tr>
<td><div class="custom-control custom-checkbox">
<input type="checkbox" name="serviceName" class="custom-control-input" id="customCheck{{$loop->index}}" value="{{$s -> servicePrice}}" >
<label class="custom-control-label" for="customCheck{{$loop->index}}">{{$s -> serviceName}} {{$s -> servicePrice}}</label>
</div>
</td>
<td>
<input type="number" class="form-control" id="quantitys" name="quantity" " placeholder="weight/measurements" >
</td>
</tr>
@endforeach
这是表格的片段，服务旁边是价格
形成
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var count=0
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
count+=1
$('.label').text(count)
} else {
//$(this).prop('checked',true);
count-=1
$('.label').text(count)
}
});
});
</script>
</head>
<body>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something">
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div><div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<label class="label"></label>
</body>
</html><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var count=0
var total=0
var num=0
var string=""
var priceSpan=""
$('input[type=text]').each(function() {
priceSpan = $(this).attr('id')
if($(this).val() != "")
{
if($(this).is(':disabled'))
{
total+=0
}
else{
//total+=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat($(this).val())
}
}
else{
total+=0
}
});
$('input[type=checkbox]').each(function() {
if($(this).is(':checked'))
{
count+=1
}
});
$('.inputTotal').text(total)
$('.checkBoxTotal').text("CheckBox Total = "+count)
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
//$(this).prop('checked',false);
string = $(this).attr('class')
$('#'+string).removeAttr('disabled');
if($('#'+string).val() != "")
{
total+=parseFloat($('span[class="'+string+'"]').text())*parseFloat($('#'+string).val());
}
$('.inputTotal').text(total)
count+=1
$('.checkBoxTotal').text("CheckBox Total = "+count)
if(count == 0)
{
$('.checkBoxTotal').text("")
}
} else {
string = $(this).attr('class')
$('#'+string).attr('disabled',"");
if($('#'+string).val() != "")
{
if(total!=0)
{
total-=parseFloat($('span[class="'+string+'"]').text())*parseFloat($('#'+string).val());
}
}
$('.inputTotal').text(total)
count-=1
$('.checkBoxTotal').text("CheckBox Total = "+count)
if(count == 0)
{
$('.checkBoxTotal').text("CheckBox Total = "+count)
}
}
});
$('input[type="text"]').focus(function() {
if($(this).val() != "")
{
num=parseFloat($(this).val())
}
else
{
num=0
}
});
$('input[type="text"]').focusout(function(){
priceSpan = $(this).attr('id')
if(num < $(this).val())
{
if($(this).val() != "")
{
total+=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat($(this).val())
}
}
else
{
total-=parseFloat($('span[class="'+priceSpan+'"]').text())*parseFloat(num)
}
$('.inputTotal').text(total)
});
});
</script>
</head>
<body class="container">
<table class="table">
<thed>
<tr>
<th>Type</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="item1" id="check1" name="option1" value="something">
<label class="form-check-label" for="check1">Wash And Fold <span class="item1">2.5</span></label>
</td>
<td>
<input type="text" id="item1" disabled>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item2" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Dry Cleaning <span class="item2">6</span></label>
</td>
<td>
<input type="text" id="item2" disabled>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item3" id="check3" name="option2" value="something">
<label class="form-check-label" for="check3">Iron <span class="item3">1</span></label>
</td>
<td>
<input type="text" id="item3" disabled>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item4" id="check4" name="option2" value="something">
<label class="form-check-label" for="check4">Blanket/Curtain cleaning <span class="item4">7</span></label>
</td>
<td>
<input type="text" id="item4" disabled>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item5" id="check5" name="option2" value="something">
<label class="form-check-label" for="check5">Carpet Cleaning <span class="item5">0.6</span></label>
</td>
<td>
<input type="text" id="item5" disabled>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2"><h4>Total = <small class="inputTotal"></small></h4></th>
</tr>
</tfoot>
</table>
</body>
</html>