Javascript JQuery:Calculation&；选中复选框时不显示变量

还在学习JQuery。事实上，JQuery仍然是新手。尝试编写代码是：

选中“项目”复选框时，它将计算服务费乘以年数。然后再加上许可费。最后，它取总数乘以数量，然后创建项目成本

如果选中了多个项目，它还将计算项目成本并添加每个选中项目的成本，从而创建一个总项目成本。并且，它将添加每个选中项目的训练时数，创建总训练时数

项目计算完成后，它将显示项目名称、年份、数量、培训时数以及表底部选中的每个项目的总成本。它还将显示另一个表，其中包含总培训时数和所有项目的总成本

我在下面进行了编码，但似乎无法在表中显示项目

 <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> 

$（文档）.ready（函数（）{
//首先为选中的每个复选框获取索引
$（'input[id^=item_add]'）。更改（函数（）{
//获取复选框索引
var index=$（this.attr（'id'）。replace（'item_add'，''）；
//隐藏表格直到选中该框
$（'table[id^=add_item_here]'）。hide（）；
$（'table[id^=add_totals_here]'）。hide（）；
//如果选中复选框，则显示表格、计算项目成本、获取变量、计算总成本和计算总培训时数
$（'input:checkbox'）.change（function（）{
//如果复选框为，请选中“执行…”。。。
如果（$（this）.is（':checked'））{
//显示总计表
$（“#在此处添加项目”）.show（）；
$（“#在此处添加_总计”）.show（）；
//物料成本从0开始
var项目成本=0；
var总成本=0；
$（'input:checkbox:checked'）。每个（函数（）{
//仅为该复选框计算项目成本
项目成本+=parseInt（$（“#服务费”+索引）.val（））；
项目成本*=parseInt（$（'#yrs'+index.val（））；
项目成本+=parseInt（$（“#许可费”+索引）.val（））；
物料成本*=parseInt（$（'#数量'+索引）.val（））；
//获取用于计算和表格的隐藏变量。
var item=$（'#item'+index）.val（）；
var traininghrs=parseInt（$（'#traininghrs'+index）.val（））；
var qty=parseInt（$（'#qty'+index.val（））；
var yrs=parseInt（$（'#yrs'+index.val（））；
}否则{
//如果未选中，请隐藏表
$（“#在此处添加项目”）.hide（）；
$（“#在此处添加_总计”）.hide（）；
}
//总成本从0开始
var总成本=项目成本；
//将项目成本与其他项目成本相加，以计算总成本
$（'input:checkbox:checked'）。每个（函数（）{
总成本+=项目成本；
}
//总培训时数从0开始
var总培训=0；
//将试验时数与其他培训时数相加，以计算总培训时数
$（'input:checkbox:checked'）。每个（函数（）{
训练总数+=parseInt（$（'traininghrs'+index）.val（））；
}
});
//显示签入表格的每个项目
$（“#在此处添加#项#tr:last”）。追加（“”+项+“”+年+“”+数量+“”+培训费用+“”+项#成本+“”）；
//将总计显示到表格中，将行显示到表格中
$（“#在此处添加_总计tr:last”）。追加（“”+总计培训+“”+总计成本+“”）；
});                                         
//数量改变，如果有人改变了数量
$（'#数量'+索引）.更改（函数（）{
$（'input:checkbox'）。触发器（'change'）；
});
//年岁变了，如果有人改变了年岁
$（'#yrs'+索引）。更改（函数（）{
$（'input:checkbox'）。触发器（'change'）；
});                                         
}           
}

需要在表格中显示每个项目及其详细信息，然后需要有一个总计表格。到目前为止，要显示的表格格式如下所示：

 <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>

管辖区/组织：（必需）

状态：（必需）

选择状态
爱荷华州
伊利诺伊州
明尼苏达州
密苏里州
内布拉斯加州
北达科他州
南达科他州
$（文档）.ready（函数（）{
$（“#状态”）.change（函数（）{
$（this）.on（'change'，function（））{
如果（this.value==“IlIaNd”）{
$（“.box”）.not（“.IlIaNd”）.hide（）；
$（“.IlIaNd”）.show（）；
}else if（this.value==“明尼苏达州”）{
$（“.box”）.not（“.明尼苏达”）.hide（）；
$（“.明尼苏达”）.show（）；
}else if（this.value==“密苏里州”）{
$（“.box”）.not（“.Missouri”）.hide（）；
$（“.Missouri”）.show（）；
}else if（this.value==“内布拉斯加州”）{
$（“.box”）.not（“.Nebraska”）.hide（）；
$（“.Nebraska”）.show（）；
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: &#36;$service_fee | License Fee: &#36;$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>";
}

 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();
        }