在我的代码中,我需要将选中的特定复选框的值添加到span元素中。问题是它的第一次点击复选框,计算出错了。
如您所见,如果您第一次单击某个复选框,它将减去值而不是添加值。是不是有什么我忘了补充?下面列出了我的代码。先谢谢你了
const s = document.querySelectorAll('#enroll-subject');
const cue = document.getElementById('cu');
let cu = parseInt(cue.textContent.replace('Current Units: ', '').trim());
s.forEach(cb => {
cb.addEventListener('change', updateTotalUnits);
});
function updateTotalUnits() {
let totalUnits = cu;
s.forEach(cb => {
if (cb.checked) {
console.log("checked");
totalUnits += parseInt(cb.value);
} else {
console.log("not checked");
totalUnits -= parseInt(cb.value);
}
});
cue.innerHTML = `Current Units: ${totalUnits}`;
}
<div class="irreg-container" style="display:flex; flex-direction:column; text-align: center;">
<div class="header" style="display:flex; flex-direction:column;">
<span style="padding: 1em;" id="cu">Current Units: 15</span>
<span style="padding: .7em;font-size:1.3em;">Checkboxes</span>
</div>
<div class="subjects" style="display:flex; flex-direction: column;">
<table>
<tbody>
<tr>
<td style="width: 100%;">Checkbox 1</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 2</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 3</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
<tr>
<td style="width: 100%;">Checkbox 4</td>
<td style="width: 100%;"><input class="sbj-checkbox" type="checkbox" name="enroll-subject" value="4" id="enroll-subject">
</td>
</tr>
</tbody>
</table>
<div class="button-container" style="text-align: center;">
<button class="submit"> Submit </button>
</div>
</div>
</div>
1条答案
按热度按时间wko9yo5t1#
每次循环遍历 all 复选框,然后减去未选中的复选框的值是没有意义的-因为你一开始就没有 * 加 * 这些复选框的值。
只需继续使用 current
cu
值,然后仅添加或减去当前更改复选框的值。