[英]Using jquery sum field input values
Simple problem: I want to sum the values appearing in field inputs and displayed as a cumulative score.简单的问题:我想对字段输入中出现的值求和并显示为累积分数。 I am using jquery to capture the selections and using dictionary traversal to find the score value and place the score in corresponding score input fields.
我正在使用 jquery 来捕获选择并使用字典遍历来查找得分值并将得分放在相应的得分输入字段中。
Example contained in the codepen link below:下面的 codepen 链接中包含的示例:
HTML: HTML:
<div class="row">
<div class="col">
<div class="form-group">
<label>Example select</label>
<select class="form-control" id="risk_loc_name">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="col">
<label for="risk_loc_val">Score</label>
<input type="text" name="risk_loc_val" id="risk_loc_val" class="form-control risk_score" placeholder=" ">
</div>
</div>
<div class="row">
<div class="col">
<label>Example select</label>
<select class="form-control" id="risk_loc_fam">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="col">
<label for="risk_loc_fam_val">Score</label>
<input type="text" name="risk_loc_fam_val" id="risk_loc_fam_val" class="form-control risk_score" placeholder=" ">
</div>
</div>
<br>
<div class="row">
<div class="col">
<input type="text" id="risk_sum" name="risk_sum" placeholder="Total risk score">
</div>
</div>
I want the score to update as options are selected:我希望分数在选择选项时更新:
const risk_loc_choices = {
"Option 1": "1", "Option 2": "3", "Option 3": "5"
};
const risk_loc_famil = {
"Option 1": "1", "Option 2": "3", "Option 3": "5"
};
$(function() {
//Capture fields
var risk_loc_name = $('#risk_loc_name');
var risk_loc_value = $('#risk_loc_val');
var risk_loc_fam = $('#risk_loc_fam');
var risk_loc_faml_val = $('#risk_loc_fam_val');
// call to update on load
updateRisk();
updateRiskLocFam();
function updateRisk() {
var data = risk_loc_name.val();
var r_val = risk_loc_choices[data];
risk_loc_value.attr('disabled', 'disabled');
//for normal input
risk_loc_value.val('');
// Append selected value to field
// for normal input
risk_loc_value.val( risk_loc_value.val() + r_val );
};
function updateRiskLocFam() {
var data = risk_loc_fam.val();
var r_val = risk_loc_famil[data];
risk_loc_faml_val.attr('disabled', 'disabled');
//for normal input
risk_loc_faml_val.val('');
// Append selected value to field
// for normal input
risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );
};
// event listener to state dropdown change
risk_loc_name.on('change', function() {
updateRisk();
});
risk_loc_fam.on('change', function() {
updateRiskLocFam();
});
});
$(function(){
var sels = $('.risk_score');
var sum = 0;
sels.each(function() {
sum+=parseInt($(this).val());
});
$('#risk_sum').val(sum);
});
// This doesn't work:
$('.risk_score').on('input', function() {
var total = 0;
$('.risk_score').each(function() {
total += parseInt($(this).val());
});
$('#risk_sum').val(total);
});
Everything is in the pen linked above.一切都在上面链接的笔中。
Here is the codepen on which I achieved what you want.这是我实现你想要的代码笔。 Use trigger to say that value in your disabled fields has been updated.
使用触发器表示已禁用字段中的值已更新。
const risk_loc_choices = {
"Option 1": "1", "Option 2": "3", "Option 3": "5"
};
const risk_loc_famil = {
"Option 1": "1", "Option 2": "3", "Option 3": "5"
};
$(function() {
//Capture fields
var risk_loc_name = $('#risk_loc_name');
var risk_loc_value = $('#risk_loc_val');
var risk_loc_fam = $('#risk_loc_fam');
var risk_loc_faml_val = $('#risk_loc_fam_val');
// call to update on load
updateRisk();
updateRiskLocFam();
function updateRisk() {
var data = risk_loc_name.val();
var r_val = risk_loc_choices[data];
risk_loc_value.attr('disabled', 'disabled');
//for normal input
risk_loc_value.val('');
// Append selected value to field
// for normal input
risk_loc_value.val( risk_loc_value.val() + r_val );
risk_loc_value.trigger('change');
};
function updateRiskLocFam() {
var data = risk_loc_fam.val();
var r_val = risk_loc_famil[data];
risk_loc_faml_val.attr('disabled', 'disabled');
//for normal input
risk_loc_faml_val.val('');
// Append selected value to field
// for normal input
risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );
risk_loc_faml_val.trigger('change');
};
// event listener to state dropdown change
risk_loc_name.on('change', function() {
updateRisk();
});
risk_loc_fam.on('change', function() {
updateRiskLocFam();
});
});
$(function(){
var sels = $('.risk_score');
var sum = 0;
sels.each(function() {
sum+=parseInt($(this).val());
});
$('#risk_sum').val(sum);
});
$('.risk_score').on('change', function() {
var total = 0;
$('.risk_score').each(function() {
total += parseInt($(this).val());
});
$('#risk_sum').val(total);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.