Radio Button Javascript Array

Question

I have a radio button like below

Apple
<input type="radio" id="one" name="apple" data-price="10" value="light"/> Light
<input type="radio" id="two" name="apple" data-price="20" value="dark" /> Dark
<input type="text" id="appleqty" name="appleqty" value="" />

Mango
<input type="radio" id="three" name="Mango" data-price="30" value="light"/> Light
<input type="radio" id="one" name="Mango" data-price="40" value="dark" /> Dark
<input type="text" id="Mangoqty" name="Mangoqty" value="" />

Pine Apple
<input type="radio" id="four" name="Pineapple" data-price="50" value="light"/> Light
<input type="radio" id="five" name="Pineapple" data-price="60" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

Grape
<input type="radio" id="six" name="Grape" data-price="70" value="light"/> Light
<input type="radio" id="seven" name="Grape" data-price="80" value="dark" /> Dark
<input type="text" id="Pineappleqty" name="Pineappleqty" value="" />

I this i need to create a array like below

   array
      0 => 
        array
          'apple' => string 'light' (length=10)
          'price' => string '50' (length=1)
      1 => 
        array
          'Pineapple' => string 'dark' (length=10)
          'price' => string '60' (length=1)

A Kind Note : the array key should be the radio button name, the price should be taken from data-price in radio button and i need to serilize this array This should be done using javascript.

Please, show the code you've got so far and explain where did you get stuck. — Xavi López, Sep 17 '12 at 09:28

score 3 · Accepted Answer · edited May 23 '17 at 11:55

You'll need to iterate the <input>s. In order to do so:

If you know beforehand the element names you'll be looking for (i.e. apple, Mango, and so on), you can do document.getElementsByName on each of those names, as explained in In JavaScript, how can I get all radio buttons in the page with a given name?.
If you don't know them (they are dynamic), just wrap them in a <div> with a given id and iterate its children, as in how to loop through some specific child nodes.

While iterating the radios of a given name, inspect the checked property of each in order to know which of them is selected, as in How can i check if a radio button is selected in javascript?.

You'll want to build an associative array with keys the following key-value pairs, as in Dynamically creating keys in javascript associative array:

<input>'s name and value attributes.
literal price and data-price attribute. You'll need to use getAttribute('data-price') to get the data-price attribute's value.

Example:

function createArray() {

    var myArr = new Array();
    myArr[0] = createSubArray('apple');
    myArr[1] = createSubArray('Mango');
    myArr[2] = createSubArray('Pineapple');
    myArr[3] = createSubArray('Grape');
    return myArr;
}


function createSubArray(name) {
    var arr = new Array();
    elems = document.getElementsByName(name);
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].checked) {
            arr[name] = elems[i].value;
            arr['price'] = elems[i].getAttribute('data-price');
        }
    }
    return arr;
}

You can see this example working in this JSFiddle.

There are lots of code examples in the questions in this very same site that the answers links to. — Xavi López, Sep 17 '12 at 10:18
I've prepared a [fiddle](http://jsfiddle.net/sC2LC/) for you. What didn't you understand about the code? — Xavi López, Sep 17 '12 at 10:35
Have you tried `alert`ing the values you're looking for? Check this http://jsfiddle.net/sC2LC/3/. Or this http://jsfiddle.net/sC2LC/4/ — Xavi López, Sep 17 '12 at 10:57
ok thank you this works for me http://jsfiddle.net/sC2LC/4/ but how i am make this myArr[0] = createSubArray('apple'); in dynimic — Varun Sridharan, Sep 17 '12 at 11:11

Radio Button Javascript Array

1 Answers1

Linked