当点击输入检查时,如何对span标记中的数字求和?

时间:2017-05-03 16:07:27

标签: javascript jquery html

我需要在选择复选框时将所有数字相加为总费用。我会编写代码,但如果用户选中了一个或两个,全部,那么它将非常长并且不能专业地执行所有状态。这个HTML代码

<div class="features">
             <h3>مميزات الكورس والسكن  </h3>
                 <hr class="style17">
              <br><br><br>

        <div class="feature-details">


          <h4>خيارات السكن </h4>
            <div class="row skn-block">
            <div class="col-sm-4">
                <div>  <input type="radio" name="gender" value="individ-price" id="individ-price-check" onclick="individPrice();"><label> 
                    سكن فردى</label>
                    <span id="individ-price"><span id="num1">400</span>$</span>
                </div>
            </div>
             <div class="col-sm-4">
                 <div><input type="radio" name="gender" value="family-price" id="family-price-check" onclick="familyPrice()"><label>سكن عائلى </label>
                     <span id="family-price"><span id="num2">500</span>$</span>
                 </div>

            </div>
          </div>

            <div class="row">
            <div class="col-sm-4">
                <div><input type="radio" name="gender" value="special-price" id="special-price-check" onclick="specialPrice()"><label>سكن خاص</label>
                    <span id="special-price"><span id="num3">500</span>$</span>
                </div>

            </div>
             <div class="col-sm-4">
                 <div><input type="radio" name="gender" value="included-price" id="include-price-check" onclick="includePrice()"><label>سكن متضمن </label>
                     <span id="include-price"><span id="num4">500</span>$</span>
                 </div>

            </div>
          </div>


         </div>

           <div class="feature-details">


          <h4>هل تحتاج توصيل من المطار </h4>
            <div class="row">
            <div class="col-sm-4">
                <div><input type="checkbox" id="fromair-check" onclick="fromair();"><label> 
                    نعم</label></div>
            </div>     
                <span id="fromair">التكلفة :
                    <span id="num5"> 300</span>$</span>
          </div>

          <h4>هل تحتاج توصيل إلى المطار </h4>
            <div class="row">
            <div class="col-sm-4">
                <div><input type="checkbox" id="toair-check" onclick="toair();"><label> 
                    نعم</label></div>
            </div>

             <span id="toair">التكلفة : 
                 <span id="num6">300</span>$
                </span>
             </div>


            </div>

          <div class="feature-details">
          <h4>هل تحتاج   إلى التامين  </h4>
            <div class="row">
            <div class="col-sm-4">
                <div><input type="checkbox" id="policy-check" onclick="policy();"><label> 
                    نعم</label></div>
            </div>

                 <span id="policy">التكلفة :
                     <span id="num7"> 300</span>$</span>
          </div>    
            </div>

          <div class="feature-details">
          <h4> ارسال الأوراق باستخدام ال   
                     HDL</h4>
            <div class="row">
            <div class="col-sm-4">
                <div><input type="checkbox" id="hdl-check" onclick="hdlfun();"><label> 
                    نعم</label></div>
            </div>

              <span id="hdl">التكلفة :
                  <span id="num8">200</span>$</span>  
          </div>    
            </div>

                 <div class="feature-details">

            <div class="row">
            <div class="col-sm-4">
               <label>رسوم التسجيل </label>

                </div>
                <div class="col-sm-3">

               <label>التكلفة :
                   100$ </label>

                </div>
            </div>

          </div>    
                <button class="save-send" onclick="senddetail()"> حفظ وارسال</button>
            </div>

这是我的js代码

 <script>
    var chkbasicindivid = document.getElementById("individ-price-check");
    var chkbasicspecial = document.getElementById("special-price-check"); 
    var chkbasicinclude = document.getElementById("include-price-check");
    var chkbasicfamily  = document.getElementById("family-price-check");
    var chkpolicy       = document.getElementById("policy-check");
    var chkfromair      = document.getElementById("fromair-check");
    var chktoair        = document.getElementById("toair-check");
    var chkhdl          = document.getElementById("hdl-check");

       function senddetail(){

                 if ((chkbasicspecial.checked)&(chkpolicy.checked)&(chkfromair.checked)&(chktoair.checked)&(chkhdl.checked)){
                     var totalprice =0;
                     alert((parseInt(($("#num3")).text()))+(parseInt(($("#num5")).text()))+(parseInt(($("#num6")).text()))+(parseInt(($("#num7")).text()))+(parseInt(($("#num8")).text())));


                      };

我需要很好的方法来获得良好的解决方案。

0 个答案:

没有答案