单选按钮 Javascript 数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12456432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio Button Javascript Array
提问by Varun Sridharan
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 buttonand i need to serilize this array
This should be done using javascript.
the array key should be the radio button name, the price should be taken from data-price in radio button温馨提示：我需要对这个数组进行序列化这应该使用 javascript 来完成。
回答by Xavi López
You'll need to iterate the <input>s. In order to do so:
您需要迭代<input>s。为此：
If you know beforehand the element
names you'll be looking for (i.e.apple,Mango, and so on), you can dodocument.getElementsByNameon 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.
如果您事先知道
name要查找的元素（即apple、Mango等），则可以document.getElementsByName对每个名称进行操作，如在 JavaScript 中，如何使用给定的内容获取页面中的所有单选按钮中所述名称？.如果您不知道它们（它们是动态的），只需将它们包装在
<div>具有给定 id 的 a 中并迭代其子节点，就像如何遍历某些特定的子节点一样。
While iterating the radios of a given name, inspect the checkedproperty 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?.
在迭代给定的单选按钮时，检查每个单选按钮name的checked属性以了解它们中的哪一个被选中，如如何检查是否在 javascript 中选择了单选按钮？.
You'll want to build an associative arraywith keys the following key-value pairs, as in Dynamically creating keys in javascript associative array:
您需要使用以下键值对的键来构建关联数组，如在 javascript 关联数组中动态创建键：
<input>'snameandvalueattributes.- literal
priceanddata-priceattribute. You'll need to usegetAttribute('data-price')to get thedata-priceattribute's value.
<input>的name和value属性。- 文字
price和data-price属性。您需要使用getAttribute('data-price')来获取data-price属性的值。
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.
你可以看到这个例子在这个JSFiddle 中工作。
