html - Javascript counting checkboxes not working

the following Javascript code works in counting how many checkboxes are checked and highlights the row in orange:

function countCheckboxes() {
  var form = document.getElementById('frmAds');
  var count = 0;
  for (var n = 0; n < form.length; n++) {
    if (form[n].name === `chk[${n+1}]` && form[n].checked) {
      count++;
    }
  }

  document.getElementById('checkCount').innerHTML = " <b>" + count + "</b> rows are checked";
}

function toggleColour(obj, col) {
  col = col || 'transparent'
  var row = findParentRow(obj);
  if (!row.col) row.col = row.style.backgroundColor;
  row.style.backgroundColor = obj.checked ? row.col : col;

  countCheckboxes(); // Update the count when checkbox is clicked
}

function findParentRow(obj) {
  var tmp = obj.parentNode;
  if (tmp.nodeName.toLowerCase() != "tr") {
    tmp = findParentRow(tmp);
  }
  return tmp;
}

window.onload = countCheckboxes;

<form action="import.php" enctype="multipart/form-data" method="post" id="frmAds">
  <table>
    <tr>
      <td>
        <input type="checkbox" value="1" name="chk[1]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" />
      </td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="1" name="chk[2]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" />
      </td>
      <td>test 2</td>
    </tr>
    <tr style="background-color:white;">
      <td class="bigtext"><input type="checkbox" value="1" name="chk[3]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" /></td>
      <td class="bigtext">1</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[1]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="Chase - IN *CARTERS TOWING AND RE" name="desc[1]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[1]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-350.00" name="amount[1]" />
        <font color="red">$-350.00</font>
      </td>

    </tr>
    <tr>
      <td>
        <p id="checkCount"> </p>
      </td>
    </tr>
  </table>
</form>

the following Javascript code works in counting how many checkboxes are checked and highlights the row in orange:

function countCheckboxes() {
  var form = document.getElementById('frmAds');
  var count = 0;
  for (var n = 0; n < form.length; n++) {
    if (form[n].name === `chk[${n+1}]` && form[n].checked) {
      count++;
    }
  }

  document.getElementById('checkCount').innerHTML = " <b>" + count + "</b> rows are checked";
}

function toggleColour(obj, col) {
  col = col || 'transparent'
  var row = findParentRow(obj);
  if (!row.col) row.col = row.style.backgroundColor;
  row.style.backgroundColor = obj.checked ? row.col : col;

  countCheckboxes(); // Update the count when checkbox is clicked
}

function findParentRow(obj) {
  var tmp = obj.parentNode;
  if (tmp.nodeName.toLowerCase() != "tr") {
    tmp = findParentRow(tmp);
  }
  return tmp;
}

window.onload = countCheckboxes;

<form action="import.php" enctype="multipart/form-data" method="post" id="frmAds">
  <table>
    <tr>
      <td>
        <input type="checkbox" value="1" name="chk[1]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" />
      </td>
      <td>test 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" value="1" name="chk[2]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" />
      </td>
      <td>test 2</td>
    </tr>
    <tr style="background-color:white;">
      <td class="bigtext"><input type="checkbox" value="1" name="chk[3]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" /></td>
      <td class="bigtext">1</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[1]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="Chase - IN *CARTERS TOWING AND RE" name="desc[1]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[1]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-350.00" name="amount[1]" />
        <font color="red">$-350.00</font>
      </td>

    </tr>
    <tr>
      <td>
        <p id="checkCount"> </p>
      </td>
    </tr>
  </table>
</form>

The weird problem is when I add this code to my main site where all of the rows are like the bottom one, it doesn't work at all. I manually tried removing everything one by one to see what the problem is, and it seems to work once I delete the select and input fields other than the chk checkbox field. Here is the version that doesn't work:

function countCheckboxes() {
  var form = document.getElementById('frmAds');
  var count = 0;
  for (var n = 0; n < form.length; n++) {
    if (form[n].name === `chk[${n+1}]` && form[n].checked) {
      count++;
    }
  }

  document.getElementById('checkCount').innerHTML = " <b>" + count + "</b> rows are checked";
}

function toggleColour(obj, col) {
  col = col || 'transparent'
  var row = findParentRow(obj);
  if (!row.col) row.col = row.style.backgroundColor;
  row.style.backgroundColor = obj.checked ? row.col : col;

  countCheckboxes(); // Update the count when checkbox is clicked
}

function findParentRow(obj) {
  var tmp = obj.parentNode;
  if (tmp.nodeName.toLowerCase() != "tr") {
    tmp = findParentRow(tmp);
  }
  return tmp;
}

window.onload = countCheckboxes;

<form action="import.php" enctype="multipart/form-data" method="post" id="frmAds">
  <table>
    <tr style="background-color:white;">
      <td class="bigtext"><input type="checkbox" value="1" name="chk[1]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" /></td>
      <td class="bigtext">1</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[1]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="CARTERS" name="desc[1]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[1]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-350.00" name="amount[1]" />
        <font color="red">$-350.00</font>
      </td>

    </tr>
    <tr style="background-color:white;">
      <td class="bigtext"><input type="checkbox" value="1" name="chk[2]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" /></td>
      <td class="bigtext">2</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[2]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="EXXON" name="desc[2]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[2]">
          <option value="81" selected="selected">OTR Meals - Fast Food</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-4.63" name="amount[2]" />
        <font color="red">$-4.63</font>
      </td>

    </tr>
    <tr style="background-color:white;">
      <td class="bigtext"><input type="checkbox" value="1" name="chk[3]" checked="checked" onClick="toggleColour(this,'#FEAB2F');" /></td>
      <td class="bigtext">3</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[3]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="VTC SERVICE" name="desc[3]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[3]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-1970.07" name="amount[3]" />
        <font color="red">$-1970.07</font>
      </td>

    </tr>
    <tr>
      <td>
        <p id="checkCount"> </p>
      </td>
    </tr>
  </table>
</form>

Any idea how to fix this?

Share Improve this question edited Mar 31 at 14:50 Barmar 784k57 gold badges548 silver badges660 bronze badges asked Mar 31 at 12:05 user26136009 291 silver badge8 bronze badges

3 "and it seems to work once I delete the select and input fields other than the chk checkbox field" - it's because you are simply looping "over" the form, which will iterate over all the elements it contains. If you are only interested in the checkboxes, then select those explicitly to begin with: var form = document.querySelectorAll('#frmAds input[type=checkbox]'); (And the variable itself could probably do with a better name then.) – C3roe Commented Mar 31 at 12:19
1 To add to the above, add a simple console.log(n, form[n].name); - for the 2nd checkbox, it outputs: 5 'chk[2]' 5 !== 2. – fdomn-m Commented Mar 31 at 12:25
1 The working one expects the checkboxes to be in consecutive order from the start of the form. The non-working one has the checkboxes mixed with other elements. So when n = 1 it will fetch a non-checkbox element this won't match the name=chk[2]. And when it reaches the element with name "chk[2]" then n won't match. Just...don't do this count. Use a selector. – VLAZ Commented Mar 31 at 12:26
I can't believe either works. getElementById() returns a single element, there's no form.length. You're not looping over the checkboxes at all. – Barmar Commented Mar 31 at 14:53
Never mind. I just learned that <form> elements are array-like, the elements are all the controls in the form. But as pointed out above, when you have different types of controls, the array index won't match the checkbox number. – Barmar Commented Mar 31 at 14:57

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

This can be simplified and that help the debugging and cuts down on errors

I removed and delgate the onclick

I removed the inline style on the TRs

I specifically look for checkboxes starting with chk

const checkboxSelector = '[type=checkbox][name^=chk]';

window.addEventListener('load', () => {
  const form = document.getElementById('frmAds');
  const allChecks = form.querySelectorAll(checkboxSelector);
  const counter = document.getElementById('checkCount');

  const countCheckboxes = (e) => {
    // If no event it's the initial call, else check if target is a checkbox
    if (e && e.target && !e.target.matches(checkboxSelector)) return;
    let cnt = 0;
    allChecks.forEach(chk => {
      cnt += chk.checked ? 1 : 0;
      chk.closest('tr').classList.toggle('checked', chk.checked);
    });
    counter.innerHTML = `<b>${cnt}</b> row${cnt === 1 ? ' is' : 's are'} checked`;
  };
  form.addEventListener('click', countCheckboxes);
  // Run on load
  countCheckboxes(); // No event passed, will count all checkboxes
});

tr {
  background-color: white;
}

tr.checked {
  background-color: #FEAB2F !important;
}

<form action="import.php" enctype="multipart/form-data" method="post" id="frmAds">
  <table>
    <tr>
      <td class="bigtext"><input type="checkbox" value="1" name="chk[1]" checked="checked" /></td>
      <td class="bigtext">1</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[1]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="CARTERS" name="desc[1]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[1]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-350.00" name="amount[1]" />
        <font color="red">$-350.00</font>
      </td>

    </tr>
    <tr>
      <td class="bigtext"><input type="checkbox" value="1" name="chk[2]" checked="checked" /></td>
      <td class="bigtext">2</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[2]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="EXXON" name="desc[2]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[2]">
          <option value="81" selected="selected">OTR Meals - Fast Food</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-4.63" name="amount[2]" />
        <font color="red">$-4.63</font>
      </td>

    </tr>
    <tr>
      <td class="bigtext"><input type="checkbox" value="1" name="chk[3]" checked="checked" /></td>
      <td class="bigtext">3</td>
      <td class=" bigtext"><input type="hidden" value="03/28/2025" name="date[3]" />03/28/2025</td>
      <td class="bigtext"><input type="text" size="56" value="VTC SERVICE" name="desc[3]" maxlength="190" style="border: none; padding: 4px; font-size: 12px;" /></td>
      <td class="bigtext"><select name="cat[3]">
          <option value="1" selected="selected">(**NO MATCH**)</option>
          <option value="829">(Work) Hotel Stay</option>
          <option value="818">(Work) Uber and Taxi</option>
          <option value="45">Accountant</option>
          <option value="850">Addon Asset</option>
          <option value="2">Bank Dividends</option>
          <option value="3">Bank Interest</option>
          <option value="16">Business Local Taxes</option>
          <option value="821">Cashback Reward</option>
          <option value="864">Commissions &amp; Fees</option>
          <option value="70">DELETE THIS?</option>
          <option value="55">Dental</option>
          <option value="872">Ebay Items</option>
          <option value="50">Estimated Taxes</option>
          <option value="18">Health Insurance</option>
          <option value="53">Medical Services</option>
          <option value="7">Mobile Internet</option>
          <option value="861">Office Rent</option>
          <option value="78">OTR MEALS - Dining</option>
          <option value="81">OTR Meals - Fast Food</option>
          <option value="855">Personal - Air Travel</option>
          <option value="67">Personal - ATM</option>
          <option value="866">Personal - Bank Fees</option>
          <option value="843">Personal - Bug Prevention</option>
          <option value="75">Personal - Car Insurance</option>
          <option value="845">Personal - Car Loan</option>
          <option value="69">Personal - Car Maintenance</option>
          <option value="847">Personal - Car Upgrades</option>
          <option value="72">Personal - Car Wash</option>
          <option value="66">Personal - Clothing</option>
          <option value="61">Personal - Dining</option>
          <option value="89">Personal - Dry Cleaners</option>
          <option value="92">Personal - Electric Bill</option>
          <option value="84">Personal - Entertainment</option>
          <option value="62">Personal - Fast Food</option>
          <option value="867">Personal - Fundrise Investment</option>
          <option value="60">Personal - Gasoline</option>
          <option value="63">Personal - Groceries</option>
          <option value="64">Personal - Haircuts</option>
          <option value="814">Personal - Home Insurance</option>
          <option value="68">Personal - Home Items</option>
          <option value="863">Personal - Home Maintenance</option>
          <option value="94">Personal - Home Security</option>
          <option value="811">Personal - Interest Payments</option>
          <option value="83">Personal - Landscaping</option>
          <option value="71">Personal - Licenses</option>
          <option value="95">Personal - Local Internet</option>
          <option value="97">Personal - Mailbox</option>
          <option value="844">Personal - Miscellaneous</option>
          <option value="76">Personal - Mortgage</option>
          <option value="876">Personal - Mutual Funds</option>
          <option value="862">Personal - Natural Gas</option>
          <option value="857">Personal - Phone Apps</option>
          <option value="819">Personal - Rental Car</option>
          <option value="65">Personal - Shopping</option>
          <option value="873">Personal - Transfers</option>
          <option value="46">Personal - Trash Disposal</option>
          <option value="851">Personal - Truck Upgrades</option>
          <option value="827">Personal - Uber and Taxi</option>
          <option value="885">Personal - Umbrella</option>
          <option value="93">Personal - Water Bill</option>
          <option value="98">Personal - Web Hosting</option>
          <option value="90">Personal - Wine</option>
          <option value="21">PO Box</option>
          <option value="54">Prescriptions</option>
          <option value="813">Property Taxes</option>
          <option value="822">Refunds</option>
          <option value="874">SBA Loan</option>
          <option value="840">State Permits</option>
          <option value="878">Trailer Repair</option>
          <option value="839">Truck 2290</option>
          <option value="849">Truck DACH</option>
          <option value="824">Truck Fuel</option>
          <option value="836">Truck IFTA</option>
          <option value="830">Truck Insurance</option>
          <option value="875">Truck Lumpers</option>
          <option value="832">Truck Maintenance</option>
          <option value="858">Truck Parking</option>
          <option value="834">Truck Payment</option>
          <option value="831">Truck Repairs</option>
          <option value="838">Truck SCAC</option>
          <option value="826">Truck Software</option>
          <option value="58">Truck Supplies</option>
          <option value="833">Truck Tolls</option>
          <option value="837">Truck UCR</option>
          <option value="825">Truck Wash</option>
          <option value="86">W2 Payroll (After Tax)</option>
        </select></td>
      <td class="bigtext" nowrap><input type="hidden" value="-1970.07" name="amount[3]" />
        <font color="red">$-1970.07</font>
      </td>

    </tr>
    <tr>
      <td>
        <p id="checkCount"> </p>
      </td>
    </tr>
  </table>
</form>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript counting checkboxes not working - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)