jQuery將兩個總計加在一起

我有一個基本表單，客戶可以通過複選框和選擇框來選擇一系列票據。然後它產生一個小計。jQuery將兩個總計加在一起

我只是想看看我可以如何將這兩個小計加在一起。

我的HTML被

<form id="calx-south-green"> 
      <fieldset id="adults"> 
       <legend>Additional Adults - <span class="red">£228</span></legend> 
       <div> 
        <label for="1">1</label> 
        <input type="checkbox" id="1" value="228" /> 
       </div> 
       <div> 
        <label for="2">2</label> 
        <input type="checkbox" id="2" value="228" /> 
       </div> 
       <div> 
        <label for="3">3</label> 
        <input type="checkbox" id="3" value="228" /> 
       </div> 
       <div> 
        <label for="4">4</label> 
        <input type="checkbox" id="4" value="228" /> 
       </div> 
       <div> 
        <label for="5">5</label> 
        <input type="checkbox" id="5" value="228" /> 
       </div> 
       <div> 
        <select name="proc" id="proc"> 
         <option value="0">0</option> 
         <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="text" name="Adult Sub Total" id="adults_total" /> 
      </fieldset> 

      <fieldset id="young"> 
       <legend>Young Adults 16-21 - <span class="red">£146</span></legend> 
       <div> 
        <label for="1">1</label> 
        <input type="checkbox" id="1" value="146" /> 
       </div> 
       <div> 
        <label for="2">2</label> 
        <input type="checkbox" id="2" value="146" /> 
       </div> 
       <div> 
        <label for="3">3</label> 
        <input type="checkbox" id="3" value="146" /> 
       </div> 
       <div> 
        <label for="4">4</label> 
        <input type="checkbox" id="4" value="146" /> 
       </div> 
       <div> 
        <select> 
         <option value="0">0</option> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
        </select> 
       </div> 
       <input type="text" name="Young Sub Total" id="young_total" /> 
      </fieldset> 
      <div> 
       <label for="base_fee">Base Fee</label> 
       <input type="text" name="base_fee" id="base_fee" value="228" /> 
      </div> 
      <div> 
       <p class="result">RESULT HERE</p> 
      </div> 
</form>

我的代碼是：

var total_adults = $("#adults_total"); 
var checkBox_adults = $("#adults input[type='checkbox']"); 
var _select_adults = $("#adults select"); 

checkBox_adults.click(function(){ 
    checkBox_adults.prop("checked", false); 
    var _index = $(this).attr("id"); 

    total_adults.val(_index * 228); 

    _select_adults.val(_index); 

    checkBox_adults.each(function(){ 
     if (_index > 0) { 
      $(this).prop("checked", true); 
      _index--; 
     } 
    }); 
}); 

_select_adults.change(function() { 

    checkBox_adults.prop("checked", false); 

    var _val = $(this).val(); 

    total_adults.val(_val * 228); 

    checkBox_adults.each(function() { 
     if (_val > 0) { 
      $(this).prop("checked", true); 
      _val--; 
     } 
    }); 

}); 




var total_young = $("#young input[name='Young Sub Total']"); 
var checkBox_young = $("#young input[type='checkbox']"); 
var _select_young = $("#young select"); 

checkBox_young.click(function(){ 
    checkBox_young.prop("checked", false); 
    var _index = $(this).attr("id") 
    total_young.val(_index * 146); 
    _select_young.val(_index); 
    checkBox_young.each(function(){ 
     if (_index > 0) { 
      $(this).prop("checked", true); 
      _index--; 
     } 
    }); 
}); 

_select_young.change(function() { 
    checkBox_young.prop("checked", false); 
    var _val = $(this).val(); 
    total_young.val(_val * 146); 
    checkBox_young.each(function() { 
     if (_val > 0) { 
      $(this).prop("checked", true); 
      _val--; 
     } 
    }); 
});

對於jQuery的添加我想這樣做，但它不工作

var num1 = $("#adults_total").val(), 
    num2 = $("#young_total").val(), 
    result = parseInt(num1, 10) + parseInt(num2, 10); 
$(".result").text(result);

我也有一個小提琴演示這裏 - http://jsfiddle.net/barrycorrigan/L2as6143/1/

來源

2014-10-01 Barry Corrigan

你需要添加的結果計算與變化事件。目前它只是在頁面加載時運行。 – Rhumborl 2014-10-01 10:06:53

用作

var total_adults = $("#adults_total"); 
    var checkBox_adults = $("#adults input[type='checkbox']"); 
    var _select_adults = $("#adults select"); 

    checkBox_adults.click(function(){ 
     checkBox_adults.prop("checked", false); 
     var _index = $(this).attr("id"); 

     total_adults.val(_index * 228); 

     _select_adults.val(_index); 

     checkBox_adults.each(function(){ 
      if (_index > 0) { 
       $(this).prop("checked", true); 
       _index--; 
      } 
     }); 
    }); 

    _select_adults.change(function() { 

     checkBox_adults.prop("checked", false); 

     var _val = $(this).val(); 

     total_adults.val(_val * 228); 

     checkBox_adults.each(function() { 
      if (_val > 0) { 
       $(this).prop("checked", true); 
       _val--; 
      } 
     }); 

    }); 




    var total_young = $("#young input[name='Young Sub Total']"); 
    var checkBox_young = $("#young input[type='checkbox']"); 
    var _select_young = $("#young select"); 

    checkBox_young.click(function(){ 
     checkBox_young.prop("checked", false); 
     var _index = $(this).attr("id") 
     total_young.val(_index * 146); 
     _select_young.val(_index); 
     checkBox_young.each(function(){ 
      if (_index > 0) { 
       $(this).prop("checked", true); 
       _index--; 
      } 
     }); 
     Total(); 
    }); 

    _select_young.change(function() { 
     checkBox_young.prop("checked", false); 
     var _val = $(this).val(); 
     total_young.val(_val * 146); 
     checkBox_young.each(function() { 
      if (_val > 0) { 
       $(this).prop("checked", true); 
       _val--; 
      } 
     }); 
     Total(); 
    }); 

     function Total(){ 
var num1 = $("#adults_total").val(), 
     num2 = $("#young_total").val(), 
     result = parseInt(num1, 10) + parseInt(num2, 10); 
    $(".result").text(result); 
     }

Demo

此前錯過了函數調用上的第一個複選框的變化。

UPDATED ANSWEER

來源

2014-10-01 10:07:46 Amit

- 這意味着當用戶未選中它應該從總計減去的值時 - 這不會在您的代碼中發生。 – prog1011 2014-10-01 10:12:20

你應該將你的函數**'Total（）;'**調用到'dropdown_changed'事件中。 – prog1011 2014-10-01 10:15:55

謝謝你，即使他們只使用其中一個類別，是否仍有計算總數的方法？在最後我只是得到一個楠，直到我使用第二類。 – 2014-10-01 10:33:15

你可以試試類似$("#adults :checked").length + $("#young :checked").length的東西。這會計數並添加每個字段集中選中的複選框的數量。

來源

2014-10-01 10:07:13

他們需要檢查框的總值，而不是您在代碼中遺漏了**減去功能**的計數 – Rhumborl 2014-10-01 10:08:54

試試這個 - >

var total_adults = $("#adults_total"); 
 
    var checkBox_adults = $("#adults input[type='checkbox']"); 
 
    var _select_adults = $("#adults select"); 
 

 
    checkBox_adults.click(function(){ 
 
     checkBox_adults.prop("checked", false); 
 
     var _index = $(this).attr("id"); 
 

 
     total_adults.val(_index * 228); 
 

 
     _select_adults.val(_index); 
 

 
     checkBox_adults.each(function(){ 
 
      if (_index > 0) { 
 
       $(this).prop("checked", true); 
 
       _index--; 
 
      } 
 
     }); 
 
    }); 
 

 
    _select_adults.change(function() { 
 

 
     checkBox_adults.prop("checked", false); 
 

 
     var _val = $(this).val(); 
 

 
     total_adults.val(_val * 228); 
 

 
     checkBox_adults.each(function() { 
 
      if (_val > 0) { 
 
       $(this).prop("checked", true); 
 
       _val--; 
 
      } 
 
     }); 
 

 
    }); 
 

 

 

 

 
    var total_young = $("#young input[name='Young Sub Total']"); 
 
    var checkBox_young = $("#young input[type='checkbox']"); 
 
    var _select_young = $("#young select"); 
 

 
    checkBox_young.click(function(){ 
 
     checkBox_young.prop("checked", false); 
 
     var _index = $(this).attr("id") 
 
     total_young.val(_index * 146); 
 
     _select_young.val(_index); 
 
     checkBox_young.each(function(){ 
 
      if (_index > 0) { 
 
       $(this).prop("checked", true); 
 
       _index--; 
 
      } 
 
     }); 
 
    }); 
 

 
    _select_young.change(function() { 
 
     checkBox_young.prop("checked", false); 
 
     var _val = $(this).val(); 
 
     total_young.val(_val * 146); 
 
     checkBox_young.each(function() { 
 
      if (_val > 0) { 
 
       $(this).prop("checked", true); 
 
       _val--; 
 
      } 
 
     }); 
 
    }); 
 

 

 
$('input[type="checkbox"], select').click(function() { 
 
      
 
     var num1 = $("#adults_total").val();   
 
     var num2 = $("#young_total").val(); 
 
     console.log(num1 + " " + num2); 
 
     var result = Number(num1) + Number(num2); 
 
     $(".result").text(result); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="calx-south-green"> 
 
       <fieldset id="adults"> 
 
        <legend>Additional Adults - <span class="red">£228</span></legend> 
 
        <div> 
 
         <label for="1">1</label> 
 
         <input type="checkbox" id="1" value="228" /> 
 
        </div> 
 
        <div> 
 
         <label for="2">2</label> 
 
         <input type="checkbox" id="2" value="228" /> 
 
        </div> 
 
        <div> 
 
         <label for="3">3</label> 
 
         <input type="checkbox" id="3" value="228" /> 
 
        </div> 
 
        <div> 
 
         <label for="4">4</label> 
 
         <input type="checkbox" id="4" value="228" /> 
 
        </div> 
 
        <div> 
 
         <label for="5">5</label> 
 
         <input type="checkbox" id="5" value="228" /> 
 
        </div> 
 
        <div> 
 
         <select name="proc" id="proc"> 
 
          <option value="0">0</option> 
 
          <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="text" name="Adult Sub Total" id="adults_total" /> 
 
       </fieldset> 
 

 
       <fieldset id="young"> 
 
        <legend>Young Adults 16-21 - <span class="red">£146</span></legend> 
 
        <div> 
 
         <label for="1">1</label> 
 
         <input type="checkbox" id="1" value="146" /> 
 
        </div> 
 
        <div> 
 
         <label for="2">2</label> 
 
         <input type="checkbox" id="2" value="146" /> 
 
        </div> 
 
        <div> 
 
         <label for="3">3</label> 
 
         <input type="checkbox" id="3" value="146" /> 
 
        </div> 
 
        <div> 
 
         <label for="4">4</label> 
 
         <input type="checkbox" id="4" value="146" /> 
 
        </div> 
 
        <div> 
 
         <select> 
 
          <option value="0">0</option> 
 
          <option value="1">1</option> 
 
          <option value="2">2</option> 
 
          <option value="3">3</option> 
 
          <option value="4">4</option> 
 
         </select> 
 
        </div> 
 
        <input type="text" name="Young Sub Total" id="young_total" /> 
 
       </fieldset> 
 
       <div> 
 
        <label for="base_fee">Base Fee</label> 
 
        <input type="text" name="base_fee" id="base_fee" value="228" /> 
 
       </div> 
 
       <div> 
 
        <p class="result">RESULT HERE</p> 
 
       </div> 
 
    </form>

來源

2014-10-01 10:22:02

jQuery將兩個總計加在一起

回答

相關問題