Count the number of checkbox and amount in table

I’m having a trouble on how can I count total check in table checkbox and total all amount on amount column based of what been checked in checkbox field.I’m new in javascript and html. It would be great if anyone can help me with this problem, thanks in advance!

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>
          </tr>
        </thead>
        <tbody >
          <tr>
            <td></td>
            <td><input type="checkbox" name="product_id[]"></td>
            <td>Jessica</td>
            <td>5200</td>
          </tr>

          <tr>
            <td></td>
            <td><input type="checkbox" name="product_id[]" ></td>
            <td>Jessica</td>
            <td>800</td>
          </tr>            
        </tbody>
    </table>
          Number of checkbox = <p id="total_checked"></p>
          Totol amount = <p id="total_amount"></p>

I guess using onChange this is possible.
The number of checkbox should total depends on what fields check in checkbox
and the amount should total based on amount column and fields that check in checkbox. It is possible?

3 thoughts on “Count the number of checkbox and amount in table”

  1. Run your elements through a loop and eventlistener then a conditional to check if the inputs are :checked if they are, increment/decrement the iterator to track the checked items and addition/subtraction of amounts.

    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(input.checked){
          totalAmount.textContent = Number(totalAmount.textContent) + Number(input.parentNode.parentNode.children[2].textContent)
          i++;  
        }else{
          totalAmount.textContent = Number(totalAmount.textContent) - Number(input.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>
    Reply
  2. If you wrap your checkboxes in a form, you can listen for a change event.

    On that change event, you can filter your checkboxes to see which ones are checked. This will give you the value for total_checked.

    If you add a class to your amount td it will be easier to make a selection from the checkbox.

    Here i’ve used cb.closest('tr').querySelector('.amount') to get the string value. Looping through the checked checkboxes, you can keep a running total of the values, taking care to convert the strings to numbers.

    let checkboxes = document.getElementsByName('product_id[]')
    const mainCb = document.querySelector('#main_checkbox')
    const totalCheckedP = document.querySelector('#total_checked')
    const totalAmountP = document.querySelector('#total_amount')
    const form = document.querySelector('form')
    
    mainCb.addEventListener('change', (event) => {
      checkboxes.forEach(cb => {
        cb.checked = event.currentTarget.checked
      })
    })
    
    form.addEventListener('change', () => {
      const checked = Array.from(checkboxes).filter((i) => i.checked)
      let totalAmount = 0
      checked.forEach(cb => {
        const amount = Number(cb.closest('tr').querySelector('.amount').innerText) || 0
        totalAmount += amount
      })
    
      totalCheckedP.textContent = checked.length
      totalAmountP.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>
      Totol amount =
      <p id="total_amount"></p>
    </form>
    Reply
  3. This may help you to move forward

    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++;
          total += parseInt(cb.parentElement.parentElement.lastElementChild.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>5200</td>
        </tr>
    
        <tr>
          <td></td>
          <td><input type="checkbox" name="product_id[]"></td>
          <td>Jessica</td>
          <td>800</td>
        </tr>
      </tbody>
    </table>
    
    <p>
    Number of checkbox = <span id="total_checked"></span>
    </p>
    <p>
    Total amount = <span id="total_amount"></span>
    </p>
    Reply

Leave a Comment