单选按钮Javascript数组

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.

Answer 1

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

1. If you know beforehand the element name s you'll be looking for (ie 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? .

2. 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 :

1. <input> 's name and value attributes.
2. 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 .