jQuery将两个总计加在一起

Question

我有一个基本表单，客户可以通过复选框和选择框来选择一系列票据。然后它产生一个小计。

我只是想看看我可以如何将这两个小计加在一起。

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

Answer 1

用作

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

Answer 2

你可以试试类似$("#adults :checked").length + $("#young :checked").length的东西。这会计数并添加每个字段集中选中的复选框的数量。

Answer 3

试试这个 - >

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>