Count Total Number of Checkboxes What Are Checked and Show on Page Via Js

Count total number of checkboxes what are checked and show on page via JS

You can use a querySelector.

document.querySelectorAll("input:checked").length;

Note that this will select all checkboxes in the document. If you just want to refer to a certain group of checkboxes, give all the checkboxes in the group the same name and refer to them like this:

document.querySelectorAll("input[name='name']:checked").length;//replace 'name' with the name of the checkboxes

<input type="checkbox" name="fruit" />A<input type="checkbox" name="fruit" />B<input type="checkbox" name="fruit" />C
<p id="result">Total Number of Items Selected = <p>  <script>showChecked();function showChecked(){  document.getElementById("result").textContent = "Total Number of Items Selected = " + document.querySelectorAll("input:checked").length;}document.querySelectorAll("input[name=fruit]").forEach(i=>{ i.onclick = function(){  showChecked(); }});</script>

Count the number of checkbox and amount in table

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++;
      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>

Javascript count checked checkbox

The main problem is that you're not using the i index within the loop to reference the individual checkboxes, and you've got a . just before the [ which is a syntax error. So change:

if(document.form1.["checkbox-1[]"].checked) chkCnt++;

To:

if(document.form1["checkbox-1[]"][i].checked) chkCnt++;

But you can neaten up the function somewhat as follows:

function isCountCheck(helperMsg) {
    var i, dLen = document.form1["checkbox-1[]"].length;
    // if the length property is undefined there is only one checkbox
    if (typeof dLen === "undefined") {
        if (document.form1["checkbox-1[]"].checked) return true;
    }
    else {
        for (i = 0; i < dLen; i++) {
            if (document.form1["checkbox-1[]"][i].checked) return true;
        }
    }
    alert(helperMsg);
    return false;
}

Demo: http://jsfiddle.net/nnnnnn/ZjK3w/1/

Or just loop through all inputs in the form, checking the type (and/or the name) of each one:

function isCountCheck(helperMsg) {
    var i, len, inputs = document.form1.getElementsByTagName("input");
    for (i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type === "checkbox"
            && inputs[i].checked)
            return true;
    }
    alert(helperMsg);
    return false;
}

Demo: http://jsfiddle.net/nnnnnn/ZjK3w/2/

How to get a count of all checked checkboxes on a page

Use the size() method or the length property. The length property is preferred as it is faster.

Example:

var count = $("[type='checkbox']:checked").length;

Check and Count number of checked checkboxes

Try:

Demo: https://jsfiddle.net/r00xxgk5/

if($('input:checkbox[name="noti[]"]').length > 0) { // check length of checkbox if > 0
   var sList = "";
   $('input:checkbox[name="noti[]"]').each(function () { // loop throgh all checkbox and detect if checked or not
        sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
   });
   console.log (sList);
}

How to get the total count of checkboxes of based on particular class

Use just need to add class name to this statement that you are already using, to get the checked checkboxes:

$('input.checkbox1:checkbox:checked').length

$("#SelctCheckAll").click(function() {  $('input:checkbox').not(this).prop('checked', this.checked);  var numberOfChecked = $('input:checkbox:checked').length;  var totalCheckboxes = $('input:checkbox').length;
  var checkbox1 = $('input.checkbox1:checkbox:checked').length;  console.log('Total checkbox1: ' + checkbox1);
  var checkbox2 = $('input.checkbox2:checkbox:checked').length;  console.log('Total checkbox2: ' + checkbox2);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="checkbox" id="SelctCheckAll" name="SelctCheckAll"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1"><input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2"><input type="checkbox" class="checkbox2">

Count Total Number of Checkboxes What Are Checked and Show on Page Via Js