Javascript 对复选框的值求和,带-最小选定条件
我有一个表格,有X组带有价格值的复选框。 我给每组分配了一个条件 假设我们有两组: 第一组条件:将所有值相加,前3个选择值除外 (不是索引中的前3项,而是前3项以及之后的每项选择) 第二组条件:将所有值相加,前两个选择值除外 (不是索引中的前2个,而是前2个选定项以及之后的每个选定项) 我如何使用jQuery或纯js实现它 编辑:示例表单代码Javascript 对复选框的值求和,带-最小选定条件,javascript,jquery,Javascript,Jquery,我有一个表格,有X组带有价格值的复选框。 我给每组分配了一个条件 假设我们有两组: 第一组条件:将所有值相加,前3个选择值除外 (不是索引中的前3项,而是前3项以及之后的每项选择) 第二组条件:将所有值相加,前两个选择值除外 (不是索引中的前2个,而是前2个选定项以及之后的每个选定项) 我如何使用jQuery或纯js实现它 编辑:示例表单代码 <form id="myForm"> <fieldset class="required"> <input type=
<form id="myForm">
<fieldset class="required">
<input type="checkbox" value="1.30" name="group1" id="id-1">
<label for="id-1"><span>Component 1</span><em>(€1.30)</em></label>
<input type="checkbox" value="1.00" name="group1" id="id-2">
<label for="id-2"><span>Component 2</span><em>(€1.00)</em></label>
<input type="checkbox" value="0.50" name="group1" id="id-3">
<label for="id-3"><span>Component 3</span><em>(€0.50)</em></label>
<input type="checkbox" value="0.25" name="group1" id="id-4">
<label for="id-4"><span>Component 4</span><em>(€0.25)</em></label>
<input type="checkbox" value="1.75" name="group1" id="id-5">
<label for="id-5"><span>Component 5</span><em>(€1.75)</em></label>
<input type="checkbox" value="2.00" name="group1" id="id-6">
<label for="id-6"><span>Component 6</span><em>(€2.00)</em></label>
</fieldset>
<fieldset class="required">
<input type="checkbox" value="1.20" name="group2" id="id-7">
<label for="id-7"><span>Component 1</span><em>(€1.20)</em></label>
<input type="checkbox" value="1.10" name="group2" id="id-8">
<label for="id-8"><span>Component 2</span><em>(€1.10)</em></label>
<input type="checkbox" value="0.40" name="group2" id="id-9">
<label for="id-9"><span>Component 3</span><em>(€0.40)</em></label>
<input type="checkbox" value="0.35" name="group2" id="id-10">
<label for="id-10"><span>Component 4</span><em>(€0.35)</em></label>
<input type="checkbox" value="1.15" name="group2" id="id-11">
<label for="id-11"><span>Component 5</span><em>(€1.15)</em></label>
</fieldset>
</form>
构成部分1(1.30欧元)
构成部分2(1.00欧元)
构成部分3(0.50欧元)
构成部分4(0.25欧元)
构成部分5(1.75欧元)
构成部分6(2.00欧元)
构成部分1(1.20欧元)
构成部分2(1.10欧元)
构成部分3(0.40欧元)
构成部分4(0.35欧元)
构成部分5(1.15欧元)
注意:我希望在摘要中添加最近单击的和进一步单击的,而不是索引中的最后一个。传递给
$的第一个参数。each()
是索引,这在这里很有用
在这段代码中,我们假设您的复选框是按字段集
元素分组的,这些元素具有类“group1”
,“group2”
,等等
var conditions = {
group1: 3,
group2: 2
},
total = 0,
key, condition;
// Loop through all the conditions
for (key in conditions) {
condition = conditions[key];
// Loop through all the checked checkboxes in fieldset.group1, fieldset.group2, etc
$('input[type="checkbox"]:checked', '#myForm fieldset.' + key).each(function(inputIndex) {
// Check if the current checkbox's index is higher than the minimum
if ((inputIndex + 1) > condition) {
total += parseFloat($(this).val());
}
});
}
例如:
编辑:大大简化了代码我不确定是否正确理解了这些复选框的格式,但我假设您可以区分组1复选框和组2复选框之间的区别。如果是这样,我建议跟踪到目前为止已标记的复选框的数量,以便知道何时开始汇总这些值。例如:
// The minimum number that must be checked
var minLimit1 = 3;
var minLimit2 = 2;
// The number checked per group
var numGroup1 = 0;
var numGroup2 = 0;
//The sum of the checkboxes over the group's minLimit that are checked
var sumGroup1 = 0;
var sumGroup2 = 0;
$(":input", "#myForm").each(function () {
if ((this.type == 'checkbox') && (this.checked == true)) {
// This code is just for Group 1 right now. Depending on how you differentiate
// between each group, you could either have a check in here for each group
// (or some kind of loop if the number of groups is variable), or have a separate
// each statement for each group.
if (numGroup1 >= minLimit1) {
// If the minLimit has already been reached, then increment the sum
sumGroup1++;
}
numGroup1++;
}
});
我认为这个解决方案满足您的需要。该演示将类添加到正在计算的值的标签中,以便于确定该概念是否正确
演示:
提供一些html以查看如何对复选框进行分组,以及如何更好地解释排除的元素。net是一个显示代码的地方,以显示动态创建的html。它可以有1到x个分组复选框。其中一些可能有上述情况。我正在使用.each方法读取表单中的所有元素,并根据用户选择来决定要求和的元素和不求和的元素。@mallix无论html是如何创建的,它都有一个结构,可以轻松地从live page的源中提取示例。你必须帮助我们帮助你。显示您的代码also@charlietfl我已经添加了我的表单代码。我希望我能帮上忙。我希望添加最新的点击,而不是索引中的最后一个。我们的解决方案与美国开尔文s相同。它是根据索引添加最后一个值,而不是最近单击的值。如果我从第二组中选择,组件1,然后是3,然后是2,它将索引中最后一个复选框的值相加,即组件3。第1组CheckboxesOK的结果相同。。你的解释一点也不清楚(请参见“获得更好的解释的请求”)试试这个版本:代码可能会被重构一点,以减轻它的负担,但是当从一个版本更改到另一个版本时,在确保它工作之前,不值得简化它,它会像一个符咒一样工作!!很抱歉,我没有从一开始就100%清楚。我不知道如何在我的每个实现中使用它。每次单击复选框时,我都会从一开始就扫描整个表单。您的解决方案非常有用,非常感谢。
// The minimum number that must be checked
var minLimit1 = 3;
var minLimit2 = 2;
// The number checked per group
var numGroup1 = 0;
var numGroup2 = 0;
//The sum of the checkboxes over the group's minLimit that are checked
var sumGroup1 = 0;
var sumGroup2 = 0;
$(":input", "#myForm").each(function () {
if ((this.type == 'checkbox') && (this.checked == true)) {
// This code is just for Group 1 right now. Depending on how you differentiate
// between each group, you could either have a check in here for each group
// (or some kind of loop if the number of groups is variable), or have a separate
// each statement for each group.
if (numGroup1 >= minLimit1) {
// If the minLimit has already been reached, then increment the sum
sumGroup1++;
}
numGroup1++;
}
});
/* can store values in array, or as data attribute of html */
var min_limits = [3, 2];
$('#myForm .required input:checkbox').change(function() {
var $group = $(this).closest('fieldset.required')
var parentIdx = $('fieldset.required').index($group);
/* can store values in array, or as data attribute of html */
var minLimit = $group.data('min_limit') || min_limits[parentIdx];
var $selected = $group.find(':checked').slice(minLimit);
$group.find('.counted').removeClass('counted')
var sum = 0;
if ($selected.length) {
$selected.each(function() {
sum +=1*$(this).val();
$(this).next().addClass('counted')
})
} else {
sum = 'Limit not met';
}
$group.find('.sum').text('Sum= '+sum)
})