统计表格中复选框的个数和金额

Question

我遇到了一个麻烦，我如何计数表复选框中的总检查和基于复选框字段中已选中的金额列上的总金额。我是新的javascript和html。如果有人能帮我解决这个问题，那就太好了，提前感谢!

function toggle(source) {
checkboxes = document.getElementsByName('product_id[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

<table class="table" name="table" id="table">
<thead>
<tr >
<th></th>
<th ><input type="checkbox" onClick="toggle(this)" /></th>
<th>Name</th>
<th>Amount</th>
<th>Another value</th>
</tr>
</thead>
<tbody >
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]"></td>
<td>Jessica</td>
<td>5200</td>
<td>somethingnew</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]" ></td>
<td>Jessica</td>
<td>800</td>
<td>Somevalue</td>
</tr>            
</tbody>
</table>
Number of checkbox = <p id="total_checked"></p>
Totol amount = <p id="total_amount"></p>

我想使用onChange这是可能的。复选框的总数应该取决于复选框中选中了哪些字段并且金额应该基于金额列和复选框中选中的字段的总和。有可能吗?

Answer 1

这可能会帮助你继续前进

const toggle = (source) => {
const checkboxes = document.getElementsByName('product_id[]');
checkboxes.forEach(cb => {
cb.checked = source.checked;
});
compute();
}
const compute = () => {
const checkboxes = document.getElementsByName('product_id[]');
let total = 0;
let checked = 0;
checkboxes.forEach(cb => {
if (cb.checked) {
checked++;
const amountElt = cb.parentElement.parentElement.getElementsByClassName("amount")[0];
total += parseInt(amountElt.innerText, 10);
}
});
document.getElementById("total_checked").innerText = checked;
document.getElementById("total_amount").innerText = total;

if (checked === 0) {
document.getElementById("selectall").checked = false;
} else if (checked === checkboxes.length) {
document.getElementById("selectall").checked = true;
}
}
document.getElementsByName('product_id[]').forEach(cb => {
cb.addEventListener('change', compute);
});

<table class="table" name="table" id="table">
<thead>
<tr>
<th></th>
<th><input id="selectall" type="checkbox" onClick="toggle(this)" /></th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]"></td>
<td>Jessica</td>
<td class="amount">5200</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]"></td>
<td>Jessica</td>
<td class="amount">800</td>
</tr>
</tbody>
</table>
<p>
Number of checkbox = <span id="total_checked"></span>
</p>
<p>
Total amount = <span id="total_amount"></span>
</p>

Answer 2

如果将复选框包装在<form>中，则可以侦听change事件。

在<form>的更改事件中，您可以过滤所有复选框以获得选中的复选框。您可以从此过滤数组的length属性中获得total_checked的值。

如果你添加一个类到你的数量<td>，它将更容易使相邻的选择从复选框

这里我使用checkbox.closest('tr').querySelector('.amount')从相邻的<td>中的文本中获取字符串值。

循环遍历选中的复选框，可以保留值的总数，注意将字符串转换为数字。

const form = document.querySelector('form')
const mainCheckbox = document.querySelector('#main_checkbox')
let otherCheckboxes = document.getElementsByName('product_id[]')
const totalCheckedText = document.querySelector('#total_checked')
const totalAmountText = document.querySelector('#total_amount')

mainCheckbox.addEventListener('change', (event) => {
otherCheckboxes.forEach(checkbox => {
checkbox.checked = event.currentTarget.checked
})
})
form.addEventListener('change', () => {
const checked = Array.from(otherCheckboxes).filter(checkbox => checkbox.checked)
let totalAmount = 0
checked.forEach(checkbox => {
const amount = Number(checkbox.closest('tr').querySelector('.amount').innerText) || 0
totalAmount += amount
})
totalCheckedText.textContent = checked.length
totalAmountText.textContent = totalAmount
})

<form>
<table class="table" name="table" id="table">
<thead>
<tr>
<th></th>
<th><input id="main_checkbox" type="checkbox" /></th>
<th>Name</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]"></td>
<td>Jessica</td>
<td class="amount">5200</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="product_id[]"></td>
<td>Jessica</td>
<td class="amount">800</td>
</tr>
</tbody>
</table>
Number of checkbox =
<p id="total_checked"></p>
Total amount =
<p id="total_amount"></p>
</form>

Answer 3

通过循环和eventlistener运行元素，然后通过条件来检查输入是否为:checked(如果是)，递增/递减迭代器来跟踪检查的项和数量的加法/减法。

let totalChecked = document.querySelector('#total_checked')
let totalAmount = document.querySelector('#total_amount')
let inputs = document.querySelectorAll('input')
let i = 0
let amount;
inputs.forEach( input =>{
input.addEventListener('change', e => {
if(e.target.checked){
totalAmount.textContent = Number(totalAmount.textContent) + Number(e.target.parentNode.parentNode.children[2].textContent)
i++;  
}else{
totalAmount.textContent = Number(totalAmount.textContent) - Number(e.target.parentNode.parentNode.children[2].textContent)
i--;
}
totalChecked.textContent = i;    
})
})

<table class="table" name="table" id="table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Jessica</td>
<td class="amount">5200</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Jessica</td>
<td class="amount">800</td>
</tr>
</tbody>
</table>
Number of checkbox = 
<p id="total_checked"></p>
Totol amount =
<p id="total_amount"></p>