html - Get the number of 'checkbox input tags' by javascript -


i have html page have number of divs , there 1 checkbox inside of each div.

let's say:

<div class="yea" id="div1"><input type="checkbox" class="heh" id="chk1">yeaheh1!</div> <div class="yea" id="div2"><input type="checkbox" class="heh" id="chk2">yeaheh2!</div> <div class="yea" id="div2"><input type="checkbox" class="heh" id="chk3">yeaheh3!</div> 

now want loop through checkboxes , see 1 checked in js. i've found 1 tutorial here http://www.randomsnippets.com/2008/05/15/how-to-loop-through-checkboxes-or-radio-button-groups-via-javascript/ uses form element include checkboxes , use form.elements.length number, in project form not necessary.

anyone? thanks!

use document.queryselectorall() css selector '.yea input[type=checkbox]:checked' so:

document.queryselectorall('.yea input[type=checkbox]:checked'); 

this return nodelist collection of checked inputs.

example:

document.getelementbyid('submit').addeventlistener('click', function() {    var checked = document.queryselectorall('.yea input[type=checkbox]:checked'),      = 0,      len = checked.length;    (i, len; < len; i++) {      checked[i].parentnode.classlist.add('checked');    }  });
.checked {    color: red;  }
<div class="yea" id="div1"><input type="checkbox" class="heh" id="chk1">yeaheh1!</div>  <div class="yea" id="div2"><input type="checkbox" class="heh" id="chk2">yeaheh2!</div>  <div class="yea" id="div2"><input type="checkbox" class="heh" id="chk3">yeaheh3!</div>    <button id="submit">submit</button>


Comments