Store the checked checkbox value and it's name in a two dimensional array

Question

I want to store the checked checkbox value and it's name in a two dimensional array, here is html code.

<h3>Select your favorite sports:</h3>
<label>
    <input type="checkbox" value="football" name="football"> Football</label>
<label>
    <input type="checkbox" value="baseball" name="baseball"> Baseball</label>

And I can only display the checked checbox values, here is jQuery code

$(document).ready(function () {
    $("button").click(function () {
        var favorite = [];
        $.each($("input:checked"), function () {
            favorite.push($(this).val());
        });
        alert("My favourite sports are: " + favorite);
    });
});

My question is how to store both values and It's name in favorite array?

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

You can use Array of objects for this:

favorite.push({
   name: $(this).attr('name'),
   value:$(this).val()
});

See it in action

Output:

[{
    "name": "football",
    "value": "football"
}, {
    "name": "baseball",
    "value": "baseball"
}]

If you want to display values:

$.each(favorite, function(index, obj){
   console.log("Name= "+ obj.name+"  Value="+ obj.value);
})

edited May 23 '17 at 11:51

Community

1
1

answered Jun 05 '15 at 11:36

Manwal

23,450
12
63
93

It returns object, how can i assign name and value to variable? – web dev Jun 05 '15 at 11:38
It doesn't return `Object` it will return `Array` of objects. You can easily assign value in it. – Manwal Jun 05 '15 at 11:40
Can you please more clarify , how will i assign to variable, I have no idea about it, thanks! – web dev Jun 05 '15 at 11:44
Tell me what value you wants to assign to `favorite`? – Manwal Jun 05 '15 at 11:44
I want to display like this, output: checkbox name ="here the checkbox name" and Its value is = "here It's value" – web dev Jun 05 '15 at 11:46

Balachandran · Answer 2 · 2015-06-05T11:44:52.643

1

use map().Translate all items in an array or object

var favorite= $("input:checked").map(function () {
    var obj = {};
    obj[$(this).attr('name')] = this.value;
    return obj;

}).get();

console.log(favorite)

DEMO

edited Jun 05 '15 at 11:44

answered Jun 05 '15 at 11:36

Balachandran

9,567
1
16
26

@SadamAfridi Welcome :) – Balachandran Jun 05 '15 at 12:00

score 1 · Answer 3 · answered Jun 05 '15 at 11:37

1

Use array of objects

$(document).ready(function () {
    $("button").click(function () {
        var favorite = [];
        $.each($("input:checked"), function () {

            // Add object in array
            favorite.push({
                name: $(this).attr('name'),
                value: $(this).val()
            });
        });
        console.log("My favourite sports are: ");
        console.log(favorite);
    });
});

answered Jun 05 '15 at 11:37

Tushar

85,780
21
159
179

How will i assign to variable these name and value? – web dev Jun 05 '15 at 11:45
`window[$(this).attr('name')] = $(this).val()` – Tushar Jun 05 '15 at 11:46

Store the checked checkbox value and it's name in a two dimensional array

3 Answers3