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
Post a Comment