我有一个如下所示的单选按钮
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)
温馨提示:数组键应该是单选按钮名称,价格应该取自单选按钮中的数据价格
,我需要序列化这个数组
这应该使用 javascript 完成。
最佳答案
您需要迭代 <input>
秒。为了这样做:
如果你事先知道元素
name
如果您要查找(即apple
、Mango
等等),您可以执行document.getElementsByName
在这些名称中的每一个上,如 In JavaScript, how can I get all radio buttons in the page with a given name? 中所述.如果您不知道它们(它们是动态的),只需将它们包装在
<div>
中即可使用给定的 id 并迭代其子项,如 how to loop through some specific child nodes .
迭代给定 name
的 radio 时, 检查 checked
每个属性,以便知道选择了哪个,如 How can i check if a radio button is selected in javascript? .
您需要构建一个关联数组,其中的键是以下键值对,如 Dynamically creating keys in javascript associative array :
-
<input>
的name
和value
属性。 - 文字
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 中看到此示例.
关于javascript - 单选按钮 Javascript 数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12456432/