'How to show count of selected checkboxes in a table

Array.prototype.shuffle = function() {
  let m = this.length, i;
  while (m) {
    i = (Math.random() * m--) >>> 0;
    [this[m], this[i]] = [this[i], this[m]]
  }
  return this;
}

$('#select_random').on('click', function() {
  if ($(this).prop('checked')) {
    let minnum = 3, maxnum = 6
    let rand = Math.min(maxnum, Math.floor(Math.random() * ($('.check').length - 1 - minnum)) + minnum)
    //create our keys array
    let keyArray = [...Array($('.check').length).keys()].shuffle().slice(0, rand)
    keyArray.forEach((chk_i, i) => {
      if (i < rand) $($('.check').get(chk_i)).prop('checked', true)
    })
  } else {
    $('.check').prop('checked', false);
  }
});

const selectedElm = document.getElementById('selected');

function showChecked(){
  selectedElm.innerHTML = document.querySelectorAll('input[name=check]:checked').length;
}

document.querySelectorAll("input[name=check]").forEach(i=>{
 i.onclick = () => showChecked();
});

Using this script to select random amount of checkboxes in table. Want to show count number of selected checkboxes count. Tried some sample not working. Tried this example, not working for me. Tring to get result in div span area like below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select Random <input type='checkbox' id="select_random"></label>
<div id="result">Total Number of Items Selected = <span id="selected">0</span></div>
 
<div class='cb'>
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
  <input type="checkbox" name="check[]" class="check"> checkbox <br />
javascripthtmljquerycheckbox


Solution 1:[1]

Solution

let checked = $(".check:checked");

in your case :

$(".check:checked").length // will return count of checked checkboxes;

i hope it was useful

Solution 2:[2]

Here is a code snippet showing how to count checked checkboxes. If I have misunderstood your problem, let me/us know and I will either alter or delete this answer

console.log(document.querySelectorAll("input:checked").length);
1<input type="checkbox" checked/>
2<input type="checkbox" checked/>
3<input type="checkbox"/>
4<input type="checkbox" checked/>

Solution 3:[3]

Here is one possible solution

const checkboxContainer = document.querySelector('.cb');

function showChecked(){
  selectedElm.innerHTML = checkboxContainer.querySelectorAll('input[type=checkbox]:checked').length;
}

You want to limit the search to a parent container tag and also filter out by input type.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 ControlAltDel
Solution 3 Ethan Doh

Related Questions