How To Check Multiple Checkboxes With Javascript?

Question

I have multiple checkboxes

Alex

Solution 1:

In case you just want to use pure/vanilla JS, here is an example:

HTML HEAD

<scripttype="text/javascript">functiongetCheckedCheckboxesFor(checkboxName) {
    var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
    Array.prototype.forEach.call(checkboxes, function(el) {
        values.push(el.value);
    });
    return values;
}
</script>

HTML BODY

<divclass="data"><span><inputname="employee"type="checkbox"value="Alex"/><labelfor="employee">Alex</label></span><span><inputname="employee"type="checkbox"value="Frank"/><labelfor="employee">Frank</label></span><span><inputname="employee"type="checkbox"value="Mark"/><labelfor="employee">Mark</label></span><inputtype="button"onclick="alert(getCheckedCheckboxesFor('employee'));"value="Get Values" /></div>

JS Fiddle link: http://jsfiddle.net/dY372/

Solution 2:

Try this: Fiddle

jQuery:

var selected = [];
$('.data input:checked').each(function() {
    selected.push($(this).val());
});

Javascript:

Baca Juga

var checkboxes = document.getElementsByName('employee');
var selected = [];
for (var i=0; i<checkboxes.length; i++) {
    if (checkboxes[i].checked) {
        selected.push(checkboxes[i].value);
    }
}

Solution 3:

Using querySelectorAll:

var checked = document.querySelectorAll('[name="employee"]:checked');

Support: IE9+.

Solution 4:

var elements=document.getElementsByName('employee');

should return you an array of the elements you require

DEMO

Solution 5:

function checked(){

    var items=getElementsByname('checkbox');

    var selectedlist=[];

    for(var i=0; i<items.length; i++)       
    {
        if(items[i].type=='checkbox' && items[i].checked==true)                 
            selectedlist+=items[i].value+"\n";
    }

    alert(selectedlist);
}

JavaScript Free