挑战：PHP、JQuery、Javascript、HTML复选框报价

我想做的是创建一个表单。第一个问题，也是他们将看到的唯一问题是一个下拉列表，允许他们选择一个状态。一旦他们选择了一个状态，等待他们的选择，它将根据他们的选择选择一个检查列表。检查列表将有大约20个选项，但目前只有6个

然后，用户可以查看检查列表并检查他们想要的项目。一旦一个项目被选中，另一个div将出现在它下面，提示用户输入他们想要购买该项目的年数和数量。这是我到目前为止所讲的部分

但现在，这就是我的困境和我正在努力做的。我确实添加了服务费、许可证费和培训时间的隐藏输入值。一旦用户检查了一个项目，我想使用jQuery来计算服务费乘以年，以获得总的_服务。然后加上总的_服务加上许可证费用，得到项目的_成本。然后项目成本乘以数量，我将得到项目总成本

然后，我想获取并显示、显示或列出项目描述、服务费、年份、许可证费、数量和培训时间，并将其排成一行、一个分区或一张表格，有点像购物车。每次检查一个项目时，它都会显示下面的每个项目

最后，在列表的底部，我想知道项目的总成本和总培训时间

现在，我有问题的下降年，它似乎重置自己。以及计算的问题。至于表单，一旦我提交表单，它将发送给人们电子邮件等，只是想让jquery代码首先发挥作用

任何建议都很好。代码如下

 <style>
 .box {
   display: none;
 }
 </style>
 <form name="" id="myForm" method="post" class="" action="http://demo.camavision.com/VCSWeb/remarks-look-up/" >
    <div class="tx-row" style="width:100%; float:left; clear:right;">
       <div  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="" selected="selected" >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">
    //<p>States test 1</p>
    <?php IlIaNd_Price_Quote_Form() ?>
</div>  

<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
    <p>Minnesota test 2</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Missouri box">
        <p>Missouri test 3</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
    <p>Nebraska test 4</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
    <p>SouthDakota test 5</p>
</div>
<span id="total_item_fees"> </span>
<script>
    $(document).ready(function()
    {
         //hide all contents
        $('div[id^=sb]').hide();
        $('input[id^=chk]').change(function(){
            // get checkbox index
            var index = $(this).attr('id').replace('chk','');
            //show respective contents
            if($(this).is(':checked')){
                    $('#sb'+index).show();
                        item_calculation();
            } else {
                $('#sb'+index).hide();
            }
        });
        function item_calculation() { 
            var descr = $('input[name="descr"]').val();
            var fee1 = $('input[name="fee1"]').val();
            var years = $('input[name="Years"]').val();
            var fee2 = $('input[name="fee2"]').val();
            var qty = $('input[name="Qty"]').val();

            var main_fees = (fee1 * years);
            var item_fees = (main_fee + license);
            var total_fees = (item_fees * qty).toFixed(2);
            $("#total_item_fees").html(total_fees );
                                        }
    });
</script>
</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（）；
}else if（this.value==“南达科他州”）{
$（“.box”）.not（“.SouthDakota”）.hide（）；
$（“.SouthDakota”）.show（）；
}否则{
$（“.box”）.hide（）；
}
});
}).change（）；
});
// 状态测试1

明尼苏达测试2

密苏里测试3

内布拉斯加州测试4

南达科他州测试5

$（文档）.ready（函数（）
{
//隐藏所有内容
$（'div[id^=sb]'）。隐藏（）；
$（'input[id^=chk]'）。更改（函数（）{
//获取复选框索引
var index=$（this.attr（'id'）.replace（'chk'，''）；
//显示各自的内容
如果（$（this）.is（':checked'））{
$（'#sb'+索引）.show（）；
项目_计算（）；
}否则{
$（'#sb'+索引）.hide（）；
}
});
函数项_计算（）{
var descr=$（'input[name=“descr”]）.val（）；
var fee1=$（'input[name=“fee1”]'）。val（）；
var years=$（'input[name=“years”]”）。val（）；
var fee2=$（'input[name=“fee2”]”）。val（）；
变量数量=$（'input[name=“qty”]”）。val（）；
var主要费用=（fee1*年）；
风险值项目费用=（主要费用+许可证）；
var总费用=（项目费用*数量）.toFixed（2）；
$（“#项目费用总额”）.html（项目费用总额）；
}
});

以下是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)){
            echo "<div class=\"tx-column tx-column-size-1-3\" >
                        <input type='checkbox'  name='descr' id='chk".$row->id."' value='".$row->id."'> ".$row->descr;
            if ($row->id == "8" || $row->id == "10" ){
                echo "<div id='sb".$row->id."' style='width:100%;'>
                    <div style='width:50%; float:left;'>
                        Years: <select name='Years'>
                                <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;'>
                        Quantity: <select name='Qty'>
                                <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='fee1' id='fee1' value='".$row->fee1."'>
                    <input type='hidden' name='fee2' id='fee2' value='".$row->fee2."'>
                    <input type='hidden' name='hrs' id='hrs' value='".$row->hours."'>
                </div>";
            } else {
                echo "<div id='sb".$row->id."'>
                        Years: <select name=\"years\">
                                <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' value='1'>
                        <input type='hidden' name='fee1' value='".$row->fee1."'>
                        <input type='hidden' name='fee2' value='".$row->fee2."'>
                        <input type='hidden' name='hrs' value='".$row->hours."'>
                    </div>";
            }


            echo "</div>";

        }
        echo "</div>";
    }
}

if（pg\u num\u行（$result）>0）{
回显“id.”值=“$row->id.”>“$row->descr；
如果（$row->id==“8”|$$row->id==“10”）{
回声“
年：
1.
2.
3.
4.
5.
数量：
1.
2.
3.
4.
5.
";
}否则{
回声“
年：
1.
2.
3.
4.
5.
";
}
回声“；
}
回声“；
}
}

好的……我已经解决了当用户检查一个项目，然后选择它没有从表单中移出的数量或年份时的问题

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