Радиокнопки / флажки / опция выбора - добавление цены (стоимости) итогового выбранного товара, а также добавление их в массив

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

Я добавил атрибут data-in, чтобы выбрать все флажки и рад ios сразу. Это минималистичный способ сделать это с 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 для (сериализации / отправки / хранения) ваших данных, не беспокоясь о свойствах (не уникальных) имен или смешанном вводе типы. Если вы получили несколько форм на одной странице и нуждаетесь в индексированной структуре данных, вы можете использовать массивы.