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

Question

So i want to get the value of all selected or checked inputs(checkboxes, radio buttons, select options) and sum them together. But i also want these values to be inserted into an array and to change the value in the array, if it was deselected or unchecked.

I want Summation of all values of the changed, selected or checked inputs when any of the inputs are fired.

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

So far i have been able to be successful in the checkboxes. But i am finding it diffcult to include the radio buttons and select option input to continue summation and also append the array of the checkboxes. I need your help. Thanks

Answer 1

I added a data-in attribute to select all checkboxes and radios at once. This is a minimalist way to do it with 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>

[UPDATE]

With your actual code, you don't need to store an array to perform mathematical operations. Unless you expect to serialize "checked" inputs for another usage.

So you could use a javascript object to (serialize/send/store) your data without worrying about (non unique) names properties or mixed input types. If you got multiple forms in the same page and need an indexed data structure then you could use arrays.