How to check multiple checkboxes with JavaScript?

Question

I have multiple checkboxes

<div class="data">    
    <span>
    <input name="employee" type="checkbox" value="Alex"/>
    <label for="employee">Alex</label>
    </span> 

    <span>
    <input name="employee" type="checkbox" value="Frank"/>
    <label for="employee">Frank</label>
    </span>    

    <span>
    <input name="employee" type="checkbox" value="Mark"/>
    <label for="employee">Mark</label>
    </span>
</div>

How to find all checked checkboxes and create json or array with result of checking?

leandroico · Accepted Answer · 2015-11-18 15:22:55Z

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

HTML HEAD

<script type="text/javascript">
function getCheckedCheckboxesFor(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

<div class="data">    
    <span>
    <input name="employee" type="checkbox" value="Alex"/>
    <label for="employee">Alex</label>
    </span> 

    <span>
    <input name="employee" type="checkbox" value="Frank"/>
    <label for="employee">Frank</label>
    </span>    

    <span>
    <input name="employee" type="checkbox" value="Mark"/>
    <label for="employee">Mark</label>
    </span>

    <input type="button" onclick="alert(getCheckedCheckboxesFor('employee'));" value="Get Values" />
</div>

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

TriniBoy · Accepted Answer · 2014-04-19 20:32:04Z

8

Try this: Fiddle

jQuery:

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

Javascript:

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

edited Apr 19, 2014 at 20:32

answered Apr 19, 2014 at 20:26

TriniBoy

6903 silver badges10 bronze badges

1 Comment

Eli Over a year ago

How about if checkboxes are on pagination? How to check if its being checked?

dfsq · Accepted Answer · 2014-04-19 20:28:17Z

2

Using querySelectorAll:

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

Support: IE9+.

answered Apr 19, 2014 at 20:28

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

andrew · Accepted Answer · 2014-04-19 20:29:42Z

1

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

should return you an array of the elements you require

DEMO

answered Apr 19, 2014 at 20:29

andrew

9,6039 gold badges36 silver badges62 bronze badges

Comments

Antoine Thiry · Accepted Answer · 2019-04-12 12:31:07Z

1

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);
}

edited Apr 12, 2019 at 12:31

Antoine Thiry

2,4524 gold badges31 silver badges45 bronze badges

answered Apr 12, 2019 at 12:04

Aravind J Joseph

112 bronze badges

Collectives™ on Stack Overflow

How to check multiple checkboxes with JavaScript?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related