1

我有一个如下所示的单选按钮

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="" />

我这个我需要创建一个如下所示的数组

   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)

温馨提示：the array key should be the radio button name, the price should be taken from data-price in radio button 我需要对这个数组进行序列化这应该使用 javascript 来完成。

4

1 回答 1

3

您需要迭代<input>s. 为此：

  1. 如果您事先知道name要查找的元素 s（即apple、Mango等），您可以document.getElementsByName对每个名称执行操作，如在 JavaScript 中如何获取页面中的所有单选按钮姓名？.

  2. 如果您不知道它们（它们是动态的），只需将它们包装在<div>具有给定 id 的 a 中并迭代其子节点，就像如何遍历某些特定的子节点一样。

在迭代给定的无线电时name，检查checked每个的属性以了解选择了哪些，如如何检查是否在 javascript 中选择了单选按钮？.

您需要使用以下键值对的键构建关联数组，如在 javascript 关联数组中动态创建键：

  1. <input>的name和value属性。
  2. 文字price和data-price属性。您需要使用getAttribute('data-price')来获取data-price属性的值。

例子：

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;
}​

您可以在此JSFiddle中看到此示例。

于 2012-09-17T10:05:18.997 回答