I have found this accepted answer but somehow it doesn't work for me:

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

when I tried to log inputElements[0] it logs:

<input type="checkbox" id="checkbox-2" class="todo-checkbox" onclick="handleCheck('text-2', 'checkbox-2')">

I only want to use pure js, no jquery, help?

I have found this accepted answer but somehow it doesn't work for me:

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

when I tried to log inputElements[0] it logs:

<input type="checkbox" id="checkbox-2" class="todo-checkbox" onclick="handleCheck('text-2', 'checkbox-2')">

I only want to use pure js, no jquery, help?

• javascript

• @i am gpbaculio Can you explain more clearly? – Dinesh Commented Mar 8, 2019 at 5:17

5 Answers 5

To get the count of all checked checkbox you can use filter() like the following way:

var inputElements = [].slice.call(document.querySelectorAll('.messageCheckbox'));
var checkedValue = inputElements.filter(chk => chk.checked).length;

console.log(checkedValue);

<input type="checkbox" class="messageCheckbox" checked>
<input type="checkbox" class="messageCheckbox">
<input type="checkbox" class="messageCheckbox" checked>

give name attribute to all the checkbox and use this code to count the checked checkbox

$('input:checkbox[name=ideaList]:checked').length

if you want to get the value of checked checkbox the take a vatiable and push the checked checkbox value in that variable

var selectedIdeas    = [];
$.each($("input:checkbox[name=ideaList]:checked"), function(){
     selectedIdeas.push($(this).val());
});

<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">
<input type="checkbox" class="todo-checkbox">

select all the checkboxes and then use a forEach loop to count which of those are checked

function countChecked(){
  const checkboxes = document.querySelectorAll('.todo-checkbox')
  let count=0
  checkboxes.forEach(checkbox=>{
    if(checkbox.checked) count+=1
  })
  return count
}

you can play with the codes here

and for when you log inputElements[i] you are getting the node itself, document.getElementsByClassName, document.querySelectorAll, etc, these return a NodeList not a JavaScript Array.

Assuming, You want to Check how many checkboxes are checked using Classname:

Alerting your code a bit,

var checkedBoxCount =0;
var inputElements = document.getElementByClassName(`your_classname`);
for(var i=0; i<inputElements.length; i++){
  if(inputElements[i].checked){
    checkBoxCount++;
  }
}

console.log(checkedBoxCount); //returns total count of checkboxes being checked

If you want to get the checked checkboxes then,

var checkedBoxes =[];
var inputElements = document.getElementByClassName(`your_classname`);
for(var i=0; i<inputElements.length; i++){
  if(inputElements[i].checked){
    checkBoxes.push(inputElements[i])
  }
}

console.log(checkedBoxes); //returns the checked check boxes

Hope This will help you , Pure JS no jquery.

function countCheckbox() {
	var count=0;
	var checkboxes = document.getElementsByClassName('checkbox');
	for(var i in checkboxes){
	       if(checkboxes[i].checked)count++; 
	}
	console.log('COUNT:',count);
}

<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<button onclick="countCheckbox();">CLICK</button>