gpt4 book ai didi

javascript - 计算复选框选择的总值(value)

转载 作者:行者123 更新时间:2023-12-03 03:09:39 26 4
gpt4 key购买 nike

我试图找出基于使用复选框选择 5 个不同选项的组合来计算总值的最佳方法。这是代码示例:

<input type="checkbox" value="Value 1" name="Value1" id="Value1">Value 1
<input type="checkbox" value="Value 2" name="Value2" id="Value2">Value 2
<input type="checkbox" value="Value 3" name="Value3" id="Value1">Value 3
<input type="checkbox" value="Value 4" name="Value4" id="Value1">Value 4
<input type="checkbox" value="Value 5" name="Value5" id="Value1">Value 5
<input type="checkbox" value="Total Value" name="TotalValue"
id="TotalValue">Total Value

以下是复选框的示例数值:复选框 1 - 100复选框 2 - 125复选框 3 - 150复选框 4 - 175复选框 5 - 200

所以我的目标是根据复选框选择得出 TotalValue 的数值。例如,如果选择复选框 2 和复选框 4,则总值(value)将为 300。因此用户可以选择单个复选框或复选框的任意组合。我也许可以使用 javascript 来完成,但是代码会非常麻烦而且很长。所以想知道是否有一种简化的方法可以使用 jQuery 来做到这一点。任何帮助将不胜感激。谢谢。

最佳答案

您可以使用 $("#mainDiv input:checkbox") 选择目标 div 中的所有复选框,并使用 .on("change") 事件计算总值(value)当其中任何一个发生更改时,检查的输入的数量。您可以像下面这样实现。

$('document').ready(function() {
$("#mainDiv input:checkbox").on("change", function(){
var totalValue = 0;
$('#mainDiv :checked').each(function() {
totalValue += parseInt(($(this).val()));
});

$("#TotalValue").val(totalValue)
})


});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="mainDiv">
<input type="checkbox" value="100" name="Value1" id="Value1">Value 1
<input type="checkbox" value="125" name="Value2" id="Value2">Value 2
<input type="checkbox" value="150" name="Value3" id="Value1">Value 3
<input type="checkbox" value="175" name="Value4" id="Value1">Value 4
<input type="checkbox" value="200" name="Value5" id="Value1">Value 5
</div>
Total Value :<input value="" name="TotalValue" id="TotalValue" />

关于javascript - 计算复选框选择的总值(value),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47003197/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com