How get the value of multiple checkboxes in javascript

Question

I used checkbox in two items now I can get the value of the second group of checkbox. The first group of checkbox I use:

<input name="option" type="checkbox" value="1" id="option1">option 1
<input name="option" type="checkbox" value="2" id="option2">option 2

Then

<input name="choice" type="checkbox" value="1" id="choice1">choice 1
<input name="choice" type="checkbox" value="2" id="choice2">choice 2

How can i get the value of selected checkboxes, in each group it is only allowed to select 1 checkbox.

I just need the javascript function

Madara's Ghost · Answer 1 · 2012-04-13T11:58:38.047

You want a radio button, (where only one option can be selected at a time)

<input name="option" type="radio" value="1" id="option1">option 1
<input name="option" type="radio" value="2" id="option2">option 2

Checkboxes can be grouped into arrays by appending [] to the end of their names:

<input name="option[]" type="checkbox" value="1" id="option1">option 1
<input name="option[]" type="checkbox" value="2" id="option2">option 2

This will not get the effect you want, it will instead group the checkboxes so that all input from them will result in one array. it is still possible to select multiple checkboxes with this method.

I never knew that checkboxes could be grouped into an array. Foolish of me to make assumptions! — Delan Azabani, Apr 13 '12 at 09:58

score 3 · Accepted Answer · answered Apr 19 '12 at 02:58

3

You can use this following codes to get the value of the checkbox if you are using multiple checkboxes.

$('input[name=option]:checked').val();

answered Apr 19 '12 at 02:58

this will only return the value of the first checkbox being checked – Beppe Aug 19 '20 at 15:26

score 1 · Answer 3 · answered Apr 13 '12 at 10:09

1

And retrieve the value of radio button as document.formName.radioboxName.value;

Since you are giving same name for the radio buttons, only one value can be selected.

answered Apr 13 '12 at 10:09

Rahul Raj

11
1

score 1 · Answer 4 · edited Feb 13 '20 at 12:01

1

With Jquery

var checked; 
$("input").each(function () {
   if ($(this).is(':checked'))
     checked[ $(this).attr("name")] = $(this).attr("value")
})
//checked is an array/object with all your checked checkboxs

edited Feb 13 '20 at 12:01

JON

965
2
10
28

answered Apr 13 '12 at 10:11

Pedro Fillastre

892
6
10

http://stackoverflow.com/a/2826810/871050. OP didn't tag his question jQuery, he also isn't using jQuery on his example site. Why would you assume he wants to use jQuery? – Madara's Ghost Apr 13 '12 at 11:54
1

I didn't say he can't, I said he probably **didn't want** there's a difference. – Madara's Ghost Apr 13 '12 at 12:38

score 1 · Answer 5 · answered Apr 19 '12 at 02:04

Katherine if you want to select a single item from both the groups then you should go for the radio other wise you can not restrict to select only one check box and unnecessary you have to write a bulk of worth less code for that.

Also you have to mention the array of check boxes. the syntax you have taken is wrong the correct one is

<input name="option[]" type="checkbox" value="1" id="option1">option 1
<input name="option[]" type="checkbox" value="2" id="option2">option 2

and for radios

<input name="option" type="radio" value="1" id="option1">option 1
<input name="option" type="radio" value="2" id="option2">option 2

score 0 · Answer 6 · answered May 25 '21 at 05:52

0

No jQuery Pure Javascript

const checkedArr = Array.from(
    document.querySelectorAll(`input[name=myCheckboxGroup]:checked`)).map(node=>node.value);

answered May 25 '21 at 05:52

Raja

451
5
5

How get the value of multiple checkboxes in javascript

6 Answers6