getting the value of checked checkbox

Question

I am trying to get the value of checked checkBoxes but the problem is that they will be dynamic on my web page eg :

while ($row=myqli_fetch_array($result)){
    echo"<div>";
    echo"<select id=\"course\" onchange=getCheckBox()>
    <option>1</option>
    <option>2</option>
    </select>";
    echo"<div id=\"checkBoxArea\">";
    echo"<buttton id=\"w\" >w</button></div>";
}

the ajax call getCheckBok() will get the result from a server and but it on checkBoxArea the result will look like this :

echo "<input type=\"checkbox\" value=\"aaa\" class=\"stdcheckbox\">";
echo "<input type=\"checkbox\" value=\"bbb\" class=\"stdcheckbox\">";

when pressing on button w I need to get the value of the checked checkbox how can I do this ?

I have tried this jQuery code :

var x=$(this).parent().find(".stdCheckBox").value;

Answer 1

Vanilla JavaScript solution to create an Array of the values of checked <input type="checkbox"/> s

function checked_values(node) {
    var checked;
    if (!node) node = document;
    checked = node.querySelectorAll('input[type="checkbox"]:checked');
    return Array.prototype.map.call(checked, function (e) {return e.value;});
}

  function checked_values(node) { var checked; if (!node) node = document; checked = node.querySelectorAll('input[type="checkbox"]:checked'); return Array.prototype.map.call(checked, function (e) {return e.value;}); } window.addEventListener('load', function () { document.querySelector('button').addEventListener('click', function () { console.log(checked_values()); }); }); 

 <label><input type="checkbox" value="a"/>a</label><br/> <label><input type="checkbox" value="b"/>b</label><br/> <label><input type="checkbox" value="c"/>c</label><br/> <label><input type="checkbox" value="d"/>d</label><br/> <button>Test (console)</button>