Get value and text of selected checkboxes

Question

I am trying to get an array of selected checkboxes values and text on button click

<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>

I'm getting values of the checkboxes but how to get text also in array

var checkboxes = document.getElementsByName('checkbox[]');
var vals = 0;
for (var i=0, n=checkboxes.length;i<n;i++) {
    if (checkboxes[i].checked) {
        vals += ","+checkboxes[i].value;
    }
}

Thank you!

Answer 1

You can use map() to create an array of the values you require:

var labelValues = $(':checkbox:checked').map(function() {
    return [ $(this).next('label').text(), this.value ];
}).get();

However given your desired output it would make more sense to create an object with the labels as the properties, something like this:

var obj = {};
$(':checkbox:checked').each(function() {
    obj[$(this).next('label').text()] = this.value;
});

---

-- 2021 Update --

You can now simplify the map() call using an ES6 arrow function. In addition you could combine the checkbox value and label text in to an array of objects, like this:

 $(':checkbox').on('change', () => { let labelValues = $(':checkbox:checked').map((i, el) => ({ value: el.value, text: el.nextElementSibling.textContent })).get(); console.log(labelValues); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="checkbox[]" value="1" /><label>text1</label> <input type="checkbox" name="checkbox[]" value="2" /><label>text2</label> <input type="checkbox" name="checkbox[]" value="3" /><label>text3</label> <input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>

Answer 2

@Rory's answers is good to return both value and text into a single array. But as the OP is asking to return value and text into separate arrays, I would propose the following way to do that.

All you have to do is to use 2 arrays to get separate values from text.

Working JSFiddle here.

Run the below snippet to see the output in the console.
This example will return:

1. Selected checkbox Values in an array
2. Selected checkbox texts in an array
3. Selected checkbox in an array (In case if you want it)

 var selectedCheckBoxValue = []; var selectedCheckBoxText = []; var selectedCheckBox = $(':checkbox:checked').map(function(i) { selectedCheckBoxValue[i] = this.value; selectedCheckBoxText[i] = $(this).next('label').text(); return this; }).get(); //Selected Checkboxes Value in a seperate Array console.log(selectedCheckBoxValue); //Selected Checkboxes Text in a seperate Array console.log(selectedCheckBoxText); //Selected Checkboxes element in a seperate Array console.log(selectedCheckBox);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input type="checkbox" name="checkbox[]" value="1" checked="true" /> <label>text1</label> <input type="checkbox" name="checkbox[]" value="2" checked="true" /> <label>text2</label> <input type="checkbox" name="checkbox[]" value="3" /> <label>text3</label> <input type="checkbox" name="checkbox[]" value="4" checked="true" /> <label>text4</label>