所以我想获取所有选定或选中的输入（复选框，单选按钮，选择选项）的值并将它们加在一起。但是我也希望将这些值插入到数组中，并更改数组中的值（如果未选中或未选中）。
我希望在触发任何输入时汇总所有更改，选定或选中的输入的值。
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="">到目前为止，我已经能够在复选框中取得成功。但是我发现很难包含单选按钮并选择选项输入以继续求和并附加复选框数组。我需要你的帮助。谢谢
最佳答案
我添加了一个数据输入属性，以一次选择所有复选框和单选框。
这是使用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对象（序列化/发送/存储）数据，而不必担心（非唯一）名称属性或混合输入类型。
如果同一页面中有多个表单，并且需要索引数据结构，则可以使用数组。
关于javascript - 单选按钮/复选框/选择选项-添加所选项目的价格总计，并将它们添加到数组中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60142191/