i have a <div id="myDiv"> containing a few <input type="checkbox"> and <br/>. Now i want to loop through all elements of the div and do something if the element is a checkbox and checked. i have already tried

var e = document.getElementById("myDiv");
var c;
for(c in e.children){
    if(c.checked) {
        //...
    }
}

but c.checked is always undefined. Can anyone tell me how i do that?

i have a <div id="myDiv"> containing a few <input type="checkbox"> and <br/>. Now i want to loop through all elements of the div and do something if the element is a checkbox and checked. i have already tried

var e = document.getElementById("myDiv");
var c;
for(c in e.children){
    if(c.checked) {
        //...
    }
}

but c.checked is always undefined. Can anyone tell me how i do that?

• javascript
• html
• checkbox

• Jquery is allowed? – Kannan T Commented Feb 8, 2018 at 15:24
• Why don't you actually select the checkboxes? – epascarello Commented Feb 8, 2018 at 15:24
• 1 @kannan Do you see JQuery tagged in the question? – Scott Marcus Commented Feb 8, 2018 at 15:24
• Please post the acpanying HTML. – Scott Marcus Commented Feb 8, 2018 at 15:25
• 1 document.querySelectorAll('#myDiv > input') should help you get started. Grab all inputs under #myDiv – Sterling Archer Commented Feb 8, 2018 at 15:25

6 Answers 6

You can go directly and target your :checked ones using:

const ckbChecked = document.querySelectorAll("#myDiv input[type=checkbox]:checked");

or one by one and than figuring out what to do with every respective one depending on the boolean Element.checked property state:

const ckb = document.querySelectorAll("#myDiv input[type=checkbox]");

[...ckb].forEach( el => {

  if( el.checked ) {
    // Is checked!
    console.log( el.value )
    el.closest("label").style.background = "gold";
  } else {
    // Not checked one
    // ... do something else
    el.closest("label").style.background = "gray";
  }

});

<div id="myDiv">
  <label><input type="checkbox" value="foo"> Foo</label>
  <label><input type="checkbox" value="bar" checked> Bar</label>
  <label><input type="checkbox" value="baz"> Baz</label>
</div>

Actually select the checkboxes. Old way would be to select the inputs and check to see if they are checked, modern way, just use a selector to get the checked ones.

var oldWay = document.getElementById("myDiv").getElementsByTagName("input");
for (var i=0; i<oldWay.length; i++) {
  console.log(oldWay[i].checked)
}

var modernWay = document.querySelectorAll("#myDiv input:checked")
console.log(modernWay)

<div id="myDiv">
  <input type="checkbox" checked="checked" />  
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />  
</div>

let checkboxes = [...document.querySelectorAll('input[type=checkbox]')]

checkboxes.forEach(checkbox => {
  if(checkbox.checked) {
    console.log('i am checked', checkbox)
  }
})

<div>
  <input type="checkbox" checked/>
  <input type="checkbox" />
  <input type="checkbox" checked/>
  <input type="checkbox" />
</div>

Use the below

var matches = [];
var searchEles = document.getElementById("myDiv").children;
for(var i = 0; i < searchEles.length; i++) {
  var elem = searchEles[i];
  
  if (elem.type == "checkbox" && elem.checked) {
    console.log(elem.id + " is Checked");
  }
}

<div id="myDiv">
  <input type="checkbox" id="chk1">
  <input type="checkbox" id="chk2" checked="checked">
  <input type="checkbox" id="chk3">
  <input type="checkbox" id="chk4" checked="checked">
</div>

c in your for in loop is the index of the array, that is why the checked property got undefined when you tried to access it.

Below code will work for you:

<div id="my-div">
  <input type="checkbox" />
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>

JS:

let myDiv = document.getElementById('my-div');

for (let i = 0; i < myDiv.children.length; i++) {
  console.log(myDiv.children[i]);
  if (myDiv.children[i].nodeName.toLowerCase() === 'input') {
    console.log(myDiv.children[i].checked);
  }
}

Your code was actually really close anyway. It should have been of as opposed to in.

var e = document.getElementById("myDiv");
var c;

for (c of e.children) {
  if (c.checked) {
    console.log("winning")
  }
}

<div id="myDiv">
  <input type="checkbox" />
  <input type="checkbox" checked />
  <input type="checkbox" checked />
  <input type="checkbox" />
  <input type="checkbox" checked />
</div>

Hope this helps