Question

我有一个单选按钮

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)

A Kind Note ：the array key should be the radio button name, the price should be taken from data-price in radio button我需要对此数组进行serilize 这应该使用javascript完成。

Answer 1

您需要迭代<input>。为此：

如果您事先知道要查找的元素name（例如apple，Mango等），您可以执行{{1}在In JavaScript, how can I get all radio buttons in the page with a given name?中解释的每个名称。
如果您不了解它们（它们是动态的），只需将它们包含在具有给定ID的document.getElementsByName中并迭代其子项，如how to loop through some specific child nodes。

在迭代给定<div>的无线电时，检查每个的name属性，以便知道选择了哪个属性，如How can i check if a radio button is selected in javascript?中所示。

您需要使用以下键值对来构建关联数组，如Dynamically creating keys in javascript associative array中所示：

checked的{{1}}和<input>属性。
文字name和value属性。您需要使用price来获取data-price属性的值。

示例：

getAttribute('data-price')

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

单选按钮Javascript数组

1 个答案: