表的输入总数取决于使用 jquery 的选择选项

Question

我希望男性女性在下面的输入框中是一个单独的总数。但目前它们都在一个输入框中，我不知道它的机制。我该如何按照设计做？

$(document).on("change", ".track", function() {
var sum = 0;
$(".track").each(function() {
sum += +$(this).val();
});
$("#total").val(sum);
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<table  >
<tr>
<select name='type[]'>
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
<tr>
<select name='type[]'>
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
</table>  

<hr>
<label> Male Total: </label>
<input type="text" id="total" value="" />
<label> Female Total: </label>
<input type="text" id="return" value="" />

Answer 1

也许下面的示例可以帮助您。它不使用jQuery(但如果需要，使用jQuery重写并不困难(，并使用form标记捕获表单更改事件：

const types = document.querySelectorAll('select[name="type[]"]');
const amounts = document.querySelectorAll('input[name="amount[]"]');
const totalMale = document.querySelector('#total-male');
const totalFemale = document.querySelector('#total-female');
const form = document.querySelector('#form');
const changeCallback = () => {
const total = {
male: 0,
female: 0
};
types.forEach((el, i) => {
total[el.value] += Number(amounts[i].value) || 0
});
totalMale.value = total.male;
totalFemale.value = total.female;
}
form.addEventListener('change', changeCallback);
changeCallback();

<form id="form">
<table>
<tr>
<select name='type[]'>
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
<tr>
<select name='type[]'>
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
</table>
</form>
<hr>
<label> Male Total: </label>
<input type="text" id="total-male" value="" />
<label> Female Total: </label>
<input type="text" id="total-female" value="" />

如果表单标记让您感到困扰，那么您可以不使用它，只需用一个选择器(例如，类.form-element(标记表单的所有元素：

const types = document.querySelectorAll('select[name="type[]"]');
const amounts = document.querySelectorAll('input[name="amount[]"]');
const totalMale = document.querySelector('#total-male');
const totalFemale = document.querySelector('#total-female');
const formElements = document.querySelectorAll('.form-element');
const changeCallback = () => {
const total = {
male: 0,
female: 0
};
types.forEach((el, i) => {
total[el.value] += Number(amounts[i].value) || 0
});
totalMale.value = total.male;
totalFemale.value = total.female;
}
formElements.forEach((el) => {
el.addEventListener('change', changeCallback)
});
changeCallback();

<table>
<tr>
<select name='type[]' class="form-element">
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track form-element" value="" /> <br>
</tr>
<tr>
<select name='type[]' class="form-element">
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track form-element" value="" /> <br>
</tr>
</table>
<hr>
<label> Male Total: </label>
<input type="text" id="total-male" value="" />
<label> Female Total: </label>
<input type="text" id="total-female" value="" />