单选按钮/复选框/选择选项 - 添加所选项目的价格（价值）总计，并将它们添加到数组中

Question

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

当任何输入被触发时，我想要对已更改、选择或检查的输入的所有值求和。

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

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

Answer 1

我添加了一个数据输入属性来一次选择所有复选框和单选。 这是使用 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>

[更新]

使用您的实际代码，您无需存储数组来执行数学运算。除非您希望序列化“已检查”输入以供其他用途。

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