jQuery:计算与选中复选框时未显示变量 [英] Jquery: calculation & variable is not displaying when checkbox checked

问题描述

仍在学习JQuery.实际上，JQuery还是新手.尝试编码为:

选中项目"复选框后，它将计算服务费乘以年份.然后向其中添加许可费.最后，将总和乘以数量，然后在其中创建item_cost.

如果检查了多个项目，它还将计算item_cost并添加每个检查项目的成本，从而创建total_item_cost.并且，它将添加每个选中项目的培训时间，从而创建一个total_training_hours.

计算完项目后，它将在表格底部显示每个项目的名称，年，数量，培训时间和总成本.它还将显示另一个表格，其中包含培训总时间和所有项目的总费用.

我已经在下面进行了编码，但似乎无法使该项目显示在表格中.

Still learning JQuery. Still new to JQuery in fact. Trying to code is:

When the an items checkbox is checked, it calculates the service fee times years. then add the license fee to it. Finally it takes the total and times the quantity, which in then creates the item_cost.

If more than one item is checked, it will also calculate the item_cost and adds each checked item''s cost, creating a total_item_cost. And, it will add each checked item''s training hours, creating a total_training_hours.

Once item is done calculating, it will then display the item name, years, quantity, training hours, and total cost of each item that is checked at the bottom in the table. It will also display another table with total training hours and the the total cost of all items.

I have coded below but cannot seem to get the items to show in the table.

<script>
							
									
$(document).ready(function(){
	
	//hide tables until box is checked
            $('#add_item_here').hide();
            $('#add_totals_here').hide();		
	
        //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());
                    });

                    // 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 > tbody:last-child').append('' + item +'' + yrs +'' + qty +'' + traininghrs + ''+ item_cost + '');

                    //Display totals into table row into a table
                    $('#add_totals_here > tbody:last-child').append('' + total_training + ''+ total_cost + '');

            //});                                         

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

<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></td><td>Total Cost</td></tr>												</tbody>										</table>
									</center>

我尝试过的事情:

修复了迭代.
更新了附录.仍在寻找答案

What I have tried:

fixed the iteration.
updated the append. Still looking for answers

推荐答案

(文档).ready(功能(){ // 隐藏表格，直到选中框为止

(document).ready(function(){ //hide tables until box is checked

(' #add_item_here').hide();

('#add_item_here').hide();

(' #add_totals_here').hide(); // 首先为选中的每个复选框获取索引

('#add_totals_here').hide(); //First obtaining indexes for each checkbox that is checked

这篇关于jQuery:计算与选中复选框时未显示变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！