Radio Buttons/Checkboxes/select option- 添加所选项目的价格（值）总计，并将它们添加到数组中

Question

所以我想获取所有 selected 或选中的输入（复选框、单选按钮、select 选项）的值并将它们加在一起。但我也希望将这些值插入到数组中并更改数组中的值，如果它被取消selected 或未选中。

我想要在触发任何输入时对已更改、select编辑或检查的输入的所有值求和。

var gh=[];
$('#CheckBoxList').on('change', 'input[type=checkbox]', function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


var sum = 0;
var gn, elem;
var gn, elem;
for (i=0; i<5; i++) {
  gn = 'game'+i;
  elem = document.getElementById(gn);
  if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost').value = sum.toFixed(2);
 



});

$('#RadioButtonList').on('change', 'input[type=radio]', function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


 



});

$('#quantity').change(function() {

  var id = $(this).val(); // this gives me null
  var index = gh.indexOf(id);
  
  if($(this).is(':checked')){
    gh.push(id);
    document.getElementById("demo").innerHTML='['+gh+']';
  }
  else{
    if (index > -1) {
      gh.splice(index, 1);
      document.getElementById("demo").innerHTML='['+gh+']';
    }
  }
console.log(gh);


 



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- partial:index.partial.html -->
<div id="CheckBoxList">
  <label><input type="checkbox" id='game0' value="1" name="Apple">Apple</label>
  <label><input type="checkbox" id='game1' value="2" name="Orange">Orange</label>
  <label><input type="checkbox" id='game2' value="3" name="Pineaple">Pineaple</label>
  <label><input type="checkbox" id='game3' value="4" name="Lemon">Lemon</label>
  <label><input type="checkbox" id='game4' value="5" name="Mango">Mango</label>
</div>

<div id="RadioButtonList">
  <label><input type="radio" id='pad' value="6" name="HI">Small Cup</label>
  <label><input type="radio" id='pad' value="7" name="HI">Medium Cup</label>
  <label><input type="radio" id='pad' value="8" name="HI">Big Cup</label>
</div>
<div id="SelectOptions">
  <select name="quantity" id="quantity">
    <option value="">Select quantity</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>



<code id="demo"></code>


total cost<input type="text" id="totalcost" value="">
<br>total Checked<input type="text" id="checkedcount" value="">
<br>total boxes<input type="text" id="totalcount" value="">

到目前为止，我已经能够在复选框中取得成功。但我发现很难包含单选按钮和 select 选项输入以继续求和并附加复选框数组。我需要你的帮助。谢谢

Answer 1

我一次性向 select 所有复选框和收音机添加了一个数据输入属性。这是使用 jQuery 的极简主义方式：

function storeArray(){
  var tab = {};
   
$('*[data-in="num"]:checked,#quantity').each(function() {    
        tab[$(this).attr('name')]=parseInt($(this).val());
    });
    return tab;
}

function validate(s){
//This is how we check that at least a checkbox is checked
 /*if($("input:checkbox:not(:checked)").length == $('input[type=checkbox]').length){
    $('#totalcost,#checkedcount').val(0);
 } else {*/
     $('#checkedcount').val(s);
     $('#totalcost').val((parseInt($('#quantity').val()) + s));
     $('#totalcount').val($('#quantity').val());
 //}

}

$('*[data-in="num"],#quantity').on('change', function() {
var sum = 0;
    $('[data-in="num"]:checked').each(function() {
        sum += parseInt($(this).val());        
    });
    validate(sum);
    myArray=storeArray();

//myArray Object containing all input values
    //console.log(myArray);
//This is how get the quantity for example
    //console.log(myArray['quantity']);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div id="CheckBoxList">
  <label><input type="checkbox" id='game0' value="1" name="Apple" data-in="num">Apple</label>
  <label><input type="checkbox" id='game1' value="2" name="Orange" data-in="num">Orange</label>
  <label><input type="checkbox" id='game2' value="3" name="Pineaple" data-in="num">Pineaple</label>
  <label><input type="checkbox" id='game3' value="4" name="Lemon" data-in="num">Lemon</label>
  <label><input type="checkbox" id='game4' value="5" name="Mango" data-in="num">Mango</label>
</div>

<div id="RadioButtonList">
  <label><input type="radio" id='pad' value="6" name="HI" data-in="num">Small Cup</label>
  <label><input type="radio" id='pad1' value="7" name="HI" data-in="num">Medium Cup</label>
  <label><input type="radio" id='pad2' value="8" name="HI" data-in="num">Big Cup</label>
</div>
<div id="SelectOptions">
  <select name="quantity" id="quantity">
    <option value="0">Select quantity</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>



<code id="demo"></code>


total cost<input type="text" id="totalcost" value="">
<br>total Checked<input type="text" id="checkedcount" value="">
<br>total boxes<input type="text" id="totalcount" value="">
</form>

[更新]

使用您的实际代码，您不需要存储数组来执行数学运算。除非您希望序列化 "checked" 输入以用于其他用途。

因此您可以使用 javascript 对象来 (serialize/send/store) 您的数据，而不必担心（非唯一的）名称属性或混合输入类型。如果您在同一页面中有多个表单并且需要索引数据结构，那么您可以使用数组。

Radio Buttons/Checkboxes/select option- 添加所选项目的价格（值）总计，并将它们添加到数组中

Radio Buttons/Checkboxes/select option- Adding price(value) total of chosen item, and also adding them in an array

javascript

arrays

checkbox

jquery

radio-button