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

Posted 2023-05-09

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

【英文标题】：Radio Buttons/Checkboxes/select option- Adding price(value) total of chosen item, and also adding them in an array

【发布时间】：2020-05-25 06:53:02

【问题描述】：

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

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

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

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

【问题讨论】：

您好！您能否解释一下您的预期公式...只是数学上的。像“（选中复选框的总和 + 单选按钮的总和）* 数量）。关于数组的东西不清楚 :) 你想要它以序列化格式（选中元素的映射数组/Json 数组/本地存储数组）吗？还是它只是你在这种情况下提到的一个求和变量？

好的。我很想选择一个包含所有值的数组。这样，如果任何单选按钮或选定选项被更改，或者复选框被取消选中，它们的值将从数组中删除，总和也会改变。

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

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。