还在学习JQuery。事实上，JQuery仍然是新手。尝试编码是：
选中项目复选框后，它会计算服务费用年数。然后添加许可证费用。最后，它需要数量的总和次数，然后创建item_cost。
如果选中了多个项目，它还会计算item_cost并添加每个已检查项目的成本，从而创建total_item_cost。并且，它将添加每个检查项目的培训时间，创建total_training_hours。
项目完成计算后，将显示表格底部检查的每个项目的项目名称，年份，数量，培训时间和总成本。它还将显示另一个表格，其中包含总培训时间和所有项目的总成本。
我已编码如下，但似乎无法获得表格中显示的项目。
<script>
$(document).ready(function(){
//First obtaining indexes for each checkbox that is checked
$('input[id^=item_add]').change(function(){
// get checkbox index
var index = $(this).attr('id').replace('item_add','');
//hide tables until box is checked
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
//If checkbox is checked, show tables, calculate item cost, get variables, calculate total cost, & calculate total training hours
$('input:checkbox').change(function(){
//If check box is check do...
if($(this).is(':checked')){
// Show totals tables
$('#add_item_here').show();
$('#add_totals_here').show();
// start at 0 for item_cost
var item_cost = 0;
var total_cost = 0;
$('input:checkbox:checked').each(function(){
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
// Get hidden variables to use for calculation and tables.
var item = $('#item'+index).val();
var traininghrs = parseInt($('#traininghrs'+index).val());
var qty = parseInt($('#qty'+index).val());
var yrs = parseInt($('#yrs'+index).val());
} else {
//if not checked keep tables hidden
$('#add_item_here').hide();
$('#add_totals_here').hide();
}
// start at 0 for total_costs
var total_cost = item_cost;
//Add item_cost with other item_costs to calculate total_cost
$('input:checkbox:checked').each(function(){
total_cost+= item_cost;
}
// start at 0 for total training hours
var total_training = 0;
//Add trianing hours with other training hours to calculate total_training
$('input:checkbox:checked').each(function(){
total_training+=parseInt($('#traininghrs'+index).val());
}
});
//Display each item that is checked into a table
$('#add_item_here tr:last').append('<td>' + item +'</td><td>' + yrs +'</td><td>' + qty +'</td><td>' + traininghrs + '</td><td>'+ item_cost + '</td></tr><tr>');
//Display totals into table row into a table
$('#add_totals_here tr:last').append('<td colspan=3 ></td><td>' + total_training + '</td><td>'+ total_cost + '</td></tr><tr>');
});
// Quantity change, if someone changes the quantity
$('#qty'+index).change(function(){
$('input:checkbox').trigger('change');
});
// Years change, if someone changes the years
$('#yrs'+index).change(function(){
$('input:checkbox').trigger('change');
});
}
}
</script>
需要将每个项目及其详细信息显示在表格中，然后需要对整个表格进行分析。到目前为止，要显示的表格格式如下：
<table id="add_item_here" style="width:98%;">
<tr><td></td></tr>
</table>
<table id="add_totals_here" style="width:98%;">
<tr><td></td></tr>
</table>
根据要求，下面是HTML表单本身。
<form id="myForm" method="post" class="price-quote-form" action="#" >
<div class="tx-row" style="width:100%; float:left; clear:right;">
<div class="tx-column tx-column-size-2-3" style="float:left; margin-top:-20px; ">
<label>
<strong>Jurisdiction / Organization:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<input style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" type="text" name="jurisdiction" required>
</label>
</div>
<div class="tx-column tx-column-size-1-3" style="float:left; margin-top:-20px; ">
<label>
<strong style="font-size:14px;">State:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<select style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" id="state" name="state" required>
<option value="" >Select State</option>
<option value="IlIaNd" >Iowa</option>
<option value="IlIaNd" >Illinois</option>
<option value="Minnesota" >Minnesota</option>
<option value="Missouri" >Missouri</option>
<option value="Nebraska" >Nebraska</option>
<option value="IlIaNd" >North Dakota</option>
<option value="SouthDakota" >South Dakota</option>
</select>
</label>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").change(function(){
$(this).on('change', function() {
if(this.value =="IlIaNd"){
$(".box").not(".IlIaNd").hide();
$(".IlIaNd").show();
}else if(this.value =="Minnesota"){
$(".box").not(".Minnesota").hide();
$(".Minnesota").show();
}else if(this.value =="Missouri"){
$(".box").not(".Missouri").hide();
$(".Missouri").show();
}else if(this.value =="Nebraska"){
$(".box").not(".Nebraska").hide();
$(".Nebraska").show();
}else if(this.value =="SouthDakota"){
$(".box").not(".SouthDakota").hide();
$(".SouthDakota").show();
}else{
$(".box").hide();
}
});
}).change();
});
</script>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="border-bottom: 1px solid #cccccc; width: 100%; float:left; clear:both;" > </div>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
<?php IlIaNd_Price_Quote_Form() ?>
</div>
<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
<p>test 2</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Missouri box">
<p>test 3</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
<p>test 4</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
<p>test 5</p>
</div>
<center>
<table id="add_item_here" style="width:98%;">
<tbody>
<tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>
</tbody>
</table>
</center>
<center>
<table id="add_totals_here" style="width:98%;">
<tbody>
<tr><td cospan=3></td><td>Total Cost</td></tr>
</tbody>
</table>
</center>
</form>
以下是表单的PHP部分，我从数据库中获取项目和定价，然后使用项目名称创建复选框，然后我将两种费用的价格低于它。而且我还要记下多少年和/或数量。
if (pg_num_rows($result) > 0){
echo "<div class=\"tx-row\" style=\width:100%; clear:both; \" > <div style=\"width: 100%; float:left; clear:both; height:25px;\" > </div>";
while ($row = pg_fetch_object($result)){
$contractid = $row->id;
$item = $row->descr;
$license_fee = $row->license;
$service_fee = $row->service;
$hours = $row->training;
echo "<div class=\"tx-column tx-column-size-1-3\" >
<div id='item".$row->contractid."' style='width:100%;'>
<div style='width:10%; float:left;'>
<input style='height:25px; width:25px;' type='checkbox' id='item_add".$row->id."' name='item_add' value='add' />
</div>
<div style='width:90%; float:left;'>
<p style='width:115%;'><strong>$item</strong> <br /><span style='font-size:10px;'>Service Fee: $$service_fee | License Fee: $$license_fee</span></p>";
if ($contractid == "8" || $contractid == "10" ){
echo "<div style='width:100%; margin-top:-20px;'>
<div style='width:50%; float:left;'>
<span style='font-size:12px;'>Years: </span><select style='height:18px;' name='yrs' id='yrs".$row->id."'>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
</div>
<div style='width:50%; float:left;'>
<span style='font-size:12px;'>Quantity: </span><select name='qty' id='qty".$row->id."' style='height:18px;'>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
</div>
<input type='hidden' name='item' id='item".$row->id."' value='".$row->descr."'>
<input type='hidden' name='servicefee' id='servicefee".$row->id."' value='$service_fee'>
<input type='hidden' name='licensefee' id='licensefee".$row->id."' value='$license_fee'>
<input type='hidden' name='traininghrs' id='traininghrs".$row->id."' value='$hours'>
</div>
<div style='width:100%; height:25px; clear:both; float:left;'></div>";
} else {
echo "<div style='width:100%; margin-top:-20px;'>
<span style='font-size:12px;'>Years: </span><select name='yrs' id='yrs".$row->id."' style='height:18px;'>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
<input type='hidden' name='Qty' id='qty".$row->id."' value='1' >
<input type='hidden' name='item' id='item".$row->id."' value='".$row->descr."'>
<input type='hidden' name='servicefee' id='servicefee' value='".$row->service."'>
<input type='hidden' name='licensefee' id='licensefee".$row->id."' value='".$row->license."'>
<input type='hidden' name='traininghrs' id='traininghrs".$row->id."' value='".$row->training."'>
</div>
<div style='width:100%; height:25px; clear:both; float:left;'></div>";
}
echo "</div>";
echo "</div> ";
echo "</div>";
}
echo "</div>";
}
希望添加php和html表单可以帮助任何能够解决这个问题的人。
这是小提琴
答案 0 :(得分：0)
$(document).ready(function(){
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
//First obtaining indexes for each checkbox that is checked
$('input[name=item_add]').change(function(){
var index = this.id.replace('item_chk','');
if($(this).is(':checked')){
AddNewItem(index);
}
else{
RemoveItem(index);
}
CalculateTotals();
});
function AddNewItem(index){
// Get hidden variables to use for calculation and tables.
var item = $('#item_chk'+index).parent().text().trim();
var traininghrs = parseInt($('#traininghrs'+index).val());
var qty = parseInt($('#qty'+index).val());
var yrs = parseInt($('#yrs'+index).val());
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
//Display each item that is checked into a table
$('#add_item_here tr:last').after('<tr id="row_id'+index + '"><td>' + item +'</td><td>' + yrs +'</td><td>' + qty +'</td><td>' + traininghrs + '</td><td>'+ item_cost + '</td></tr>');
}
function RemoveItem(index){
$('table#add_item_here tr#row_id'+index).remove();
}
function CalculateTotals(){
var total_cost = 0;
var total_training = 0;
$('input:checkbox:checked').each(function(){
var index = this.id.replace('item_chk','');
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
total_cost +=item_cost;
total_training +=traininghrs;
});
if(total_cost > 0 || total_training > 0) {
$('#add_totals_here tr:has(td)').remove();
$('#add_totals_here tr:has(th)').after('<tr><td colspan="3">' + total_training + '</td><td>'+ total_cost + '</td></tr>');
$('#add_item_here').show();
$('#add_totals_here').show();
}
else{
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
}
}
// Quantity change, if someone changes the quantity
$('select[name=qty]').change(function(){
var index = this.id.replace('qty','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
// Years change, if someone changes the years
$('select[name=yrs]').change(function(){
var index = this.id.replace('yrs','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
})td {
text-align: left;
}<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Calculate.js"></script>
<body>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
<div id="item11" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk11" name="item_add" value="add" /> Adance Search HTML
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs11">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty11" style='height:18px;'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="hidden" name="itemdescr" id="itemdescr11" value="Adance Search HTML">
<input type="hidden" name="servicefee" id="servicefee11" value="1000">
<input type="hidden" name="licensefee" id="licensefee11" value="3000">
<input type="hidden" name="traininghrs" id="traininghrs11" value="8">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item12" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk12" name="item_add" value="add" /> Adance Search PHP
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs12">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty12" style='height:18px;'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr12" value="Adance Search PHP">
<input type="hidden" name="servicefee" id="servicefee12" value="1500">
<input type="hidden" name="licensefee" id="licensefee12" value="1000">
<input type="hidden" name="traininghrs" id="traininghrs12" value="2">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item14" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk14" name="item_add" value="add" /> Adance Search WWW
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs14">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty14" style='height:18px;'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr14" value="Adance Search WWW">
<input type="hidden" name="servicefee" id="servicefee14" value="0">
<input type="hidden" name="licensefee" id="licensefee14" value="250">
<input type="hidden" name="traininghrs" id="traininghrs14" value="0">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item15" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk15" name="item_add" value="add" /> Adance Search HTTP
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs15">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty15" style='height:18px;'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr15" value="Adance Search HTTP" >
<input type="hidden" name="servicefee" id="servicefee15" value="1000">
<input type="hidden" name="licensefee" id="licensefee15" value="0">
<input type="hidden" name="traininghrs" id="traininghrs15" value="10">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
</div>
<center>
<table id="add_item_here" style="width:98%;" border="1">
<tbody>
<tr><th>Item</th><th>Years</th><th>Quantity</th><th>Training Hours</th><th>Total Item Cost</th></tr>
</tbody>
</table>
</center>
<center>
<table id="add_totals_here" style="width:98%;" border="1">
<tbody>
<tr><th colspan="3">Training Hours</th><th>Total Cost</th></tr>
</tbody>
</table>
</center>
</body>
</html>
答案 1 :(得分：-1)
好的...最后得到了我的报价计算器的总小时数和费用......
function CalculateTotals(){
var total_cost = 0;
var total_training = 0;
$('input:checkbox:checked').each(function(){
var index = this.id.replace('item_chk','');
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
total_cost +=item_cost;
total_training +=traininghrs;
});
if(total_cost > 0 || total_training > 0) {
$('#add_totals_here tr:last').children().remove();
$('#add_totals_here tr:last').after('<tr ><td colspan="3" style=\"width:66%;\">TOTALS:</td><td style=\"width:18%;\">' + total_training + '</td><td style=\"width:16%;\">$'+ total_cost + '</td></tr>');
$('#add_item_here').show();
$('#add_totals_here').show();
}
else{
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
}
要获得完整的答案，请随时给我发电子邮件...但是想要向mbadeveloper大喊大叫。他帮助了我很多，并帮助我理解了jquery。谢谢mbadeveloper。